What's this?

I put these pages together to try and understand what happened in Firefox to a site I'm developping, right after I used the technique described in an article on Anne's Weblog about Markup & Style.

What's that?

The problem occurs in Firefox and in Firefox ONLY (I only tested IE6 Win, Opera 7,54 and Opera 8 beta) and is as follows: A div acting as a #sidebar is right-floated in another div named #page. There's also a left-floated div named #content in that #page. This is the layout of the page you're currently reading.

When you set the overflow property of the #page, the sidebar (in set circumstances and only in Firefox) will not float right, but instead be cleared in an unusaul manner, namely with an extra "margin" to the right equal to the added widths of the #page's left and right padding.

Starting conditions

The #content is floated, therefore its content may overflow the container's (#page) visible boundaries. The same goes for the #sidebar.

Of course what we want is for the #page's background to expand all the way to the bottom of its actual content. Hence, overflow:auto, hence headache in Firefox.

NEXT