Faux Column Background Disappears in Firefox, but not IE

[dhull]

I have two sites that use the faux column background CSS technique. Both sites were built from the same CSS foundation with a wrapper DIV that has a background set and contains header, left, center and right DIVs.

Everything works fine in IE but the background stops halfway down in Firefox. I've heard that floated elements require different CSS to accomplish this, but all the explanations I've found say that the solution is to use the faux background technique, which is what I'm doing already.

The first site uses a background image and the second uses a background color.

http://wtonline.ag.org

http://leadersunlimited.ag.org

[drhowarddrfine]

Actually, things are not working fine in IE. IE is enclosing your floated elements. While this is what you want, this is not correct behavior and is a bug in IE. Firefox is correctly following the standard.

To get Firefox to do what you want, add overflow:auto to #wrapper which is the parent div. This will work for the one with the background color. I haven't checked the other one. Faux Columns is not for this particular issue.

edit: I did apply overflow:auto to the other one and it seems to fix it there, also.

[dhull]

I added the overflow: auto; to the wrapper DIV, but it added scrollbars to the sites in both IE and FF like they were using frames. Any ideas?

[drhowarddrfine]

Remove the height:100% from #wrapper.

[dhull]

We're really, really close now! The first site (WTOnline) looks great, but the second site (LeadersUnlimited) still has the scroll bars.

[drhowarddrfine]

ignore this. back in a minute.