« Gecko 1.8 For Web Developers: Columns | Main | Rediscovering Auckland »
March 27, 2005
Gecko 1.8 For Web Developers: Collapsing Margins And The 'Clear' Property
This was particularly important because apparently IE has a bug where a block that contains a float automatically has its height extended to include the bottom of the float. In fact, the float children of a block should not normally have any direct effect on the height of the block. But what if you do want a block to extend at least as far as the bottom of its floats, either to match this IE bug, or for your own reasons? CSS 2.1 provides a way. You simply write something like this:
<div>
<div style="float:left">...</div>
<div style="clear:both"></div>
</div>
The element with 'clear' is forced below the float, and because that element is in the normal flow, it forces its container to be at least that high. The only problem is that this usually doesn't work in Gecko 1.7/FF 1.0. Basically we were treating the space induced by 'clear' as margin space and then collapsing it away. Fixing this required a major overhaul of how clearance and margin collapsing were handled, so that right now I believe we're more standards-compliant in this area than any other browser.
I could go into lots of gory details --- this is an egregiously complex area of the CSS spec --- but I won't. Suffice it to say that the above trick for vertically sizing blocks does work in Gecko 1.8.
Posted by roc at March 27, 2005 11:24 PM
Comments
Super simple clearing floats: http://annevankesteren.nl/archives/2005/03/clearing-floats
Posted by: Arjen Schol at March 28, 2005 3:15 AM
I'm confused. I (and most of the CSS developer world) have been using this idea for a long time, and it's always worked fine in Gecko. It's usually done with some content in the clearing div, such as a non-breaking space, but that's the only difference I see. What's changed that makes this different from earlier Gecko engines?
Posted by: Eli Simpson at March 29, 2005 6:41 AM
> It's usually done with some content in the
> clearing div, such as a non-breaking space
Yeah, that was the bug --- it only worked if the clearing DIV was non-empty. And that content takes up space that you don't necessarily want.
Posted by: Robert O'Callahan at March 29, 2005 9:40 AM
clearing divs are old and busted.
overflow: auto on the container div is teh new hotness.
Posted by: nobody at March 29, 2005 7:46 PM
busted how?
overflow:auto has side effects you might not want (e.g. if the element has overflow). But whatever works for you :-)
Posted by: Robert O'Callahan at March 29, 2005 8:26 PM
Well, they are avoiced because they don't really add any semantic meaning to the page and are purely there for presentational reasons.
Using http://www.positioniseverything.net/easyclearing.html works too for example. Since Mozilla 1.5. Would that work without the '.' now?
Posted by: Anne at March 30, 2005 8:09 AM