I am afraid to try any other browsers coz I know im bound to tear my hair out, but I dont understand what I am doing wrong, I know my coding is messy, but this is my first website ever and I am doing it all in HTML, but I have a middle colom, which for some reason will only float the content to the left in firefox, the site seems fine in IE ( i know i was just as surprised ) but even if i center them in the page code it still does not work. and If I float the colom right I loose my content on the photo pages in IE but not in firefox.

 

my website is kickassbugs.com and my style sheet is fluid.css.

 

any help would be of great appreciation.

I didn't totally sort out the problem with the photo pages, but finally figured out what you were explaining.

 

Look through your domtab.css file. The problem looks to be with the #other style, but there's so much overlap I couldn't sort it out w/o grabbing your site.

 

Here are some suggestions to stabilize your layout using your primary CSS file (fluid.css):

 

First - pull your menu out of <centercol> and add a full-width menu div above your page content. (When I view the code, your menu options (and important links) are showing up way, way late in the page. It's an SEO thing.)

Second - your CSS columns should stack against each other across the page when you put them in your HTML.

I design my CSS so that the most important information appears first in the HTML. Meaning that if your most important content on each page is going to be in the right column then set your CSS columns to float:right and then put <rightcol> content in the HTML first, <centercol> content next and <leftcol> content last. Each column will then "stack" against each other starting on the right of the page and your most important content will show up first to search engines. If your most valuable content is on the left, do the opposite both in the CSS and the HTML. You have images and stuff in the middle so this is probably a good idea for your site as well.

To get your <centercol> content to hang out in the middle of the page (if that's what you want) play with the padding after you make those changes.

Last - get rid of negative margins if you can - and you probably can. To set your <centercol> in the same spot you have it, I deleted left:-10px and top:-10px and changed the margin settings for <centercol> to margin:5px 15px 0 -10px; But again, use the suggestion above and stack your columns against each other to get rid of the need for negative margins.

 

If you want to see what various tweaks do to your CSS get Firefox and the Firebug plugin. Hover over something on your page that's bugging you, right-click and 'inspect element'. A bar shows up at the bottom and the CSS will be on the right. You can make dynamic changes to the CSS for a live web page, figure out what works and then put the changes in your CSS using your editor.

 

Also, I'm seeing some sites with more Firefox traffic than IE (primarily tech sites) so don't ignore Firefox.

 

Good luck,

Craig