So here is my problem. I am helping a family member with a site and trying to make the jump from tables to divs. I have it mostly working and it looks fine in IE, but Firefox has some issues.

Here is the site: http://tinyurl.com/hbpbk

It seems like the #leftcontent layer is not being taken into account by the parent #wrapper or #contentcenter tags even though it is relative to them. I just want the tan bars to continue to the bottom and the white background (with drop shadow) to run the entire length. Now, the leftcontent is laying over the top of the wrapper and contentcenter...

This seems easy enough, but I have tried all kinds of stuff to no avail. A lot of people descibe this as a Firefox issue, but there must be some way to fix it. Any ideas?

Thanks in advance.

Hi mate, This fugged me right off on a site i did, but try this out. Create the following class:-

.clearer {clear:both;height:1px;}

Then add this class to a <br> ( <br class="clearer"> ) before you close the div at the end that forms the white panel.

Basically it closes off the cascade and ensures it doesn't take any attributes from the other styles in the cascade - I think that makes sense! ;-)

Hope that makes sense...

So the question is, why doesn't the length of the #leftcontent style just cause the #contentcenter to grow?

Because the #leftcontent div is set to float:left; which means that containing elements do not expand to contain it. that's why you need either some sort of element in the end to clear the floated element (and expand the container to wrap around it) or to use the PositionIsEverything.net "How To Clear Floats Without Structural Markup" fix. (though if a clearing element is breaking the layout I would be very surprised if that worked any better.)

most likely you just need to use one of those and then clean up the what/how css for the rest of the page to get it to work.

In other news: you might want to consider building using firefox then hacking for IE, it's much easier to do the compliant code then add the specific code then it is to do the opposite. (I'm just guessing based on the way yr first post was worded that yr using IE as you're building, if that's not the case then feel free to ignore this.)

http://www.alistapart.com/articles/fauxcolumns/