Monday, 28 March 2005

Gecko 1.8 For Web Developers: Collapsing Margins And The 'Clear' Property

Every Gecko release we spend lots of time and energy fixing bugs to make us more standards compliant and, where necessary, more Web-compliant. One area where I did some significant work last year was fixing how we handle content that combines floats, 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.


6 comments:

  1. Super simple clearing floats: http://annevankesteren.nl/archives/2005/03/clearing-floats

    ReplyDelete
  2. 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?

    ReplyDelete
  3. Robert O'Callahan29 March 2005 21:40

    > 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.

    ReplyDelete
  4. clearing divs are old and busted.
    overflow: auto on the container div is teh new hotness.

    ReplyDelete
  5. Robert O'Callahan30 March 2005 08:26

    busted how?
    overflow:auto has side effects you might not want (e.g. if the element has overflow). But whatever works for you :-)

    ReplyDelete
  6. 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?

    ReplyDelete