Simple Clearing of Floats

In Simple Clearing of Floats, Alex Walker describes a really simple way of clearing floats without extra markup that Paul O’Brien came up with. (via fiftyfoureleven.com)

This looks really promising. Being able to make a container expand to contain any floating children without using the clear property lets you use this without worrying about all previous floats being cleared.

In a quick test I did this seems to work well for all current Mac browsers, with the exception of Opera 7.54. It does work in Opera 8 beta though. It did not work in IE/Win, but it’s easy to use either the Holly hack or conditional comments to feed IE/Win a simple height:1%;, which will make it contain any floats.

Does anyone know what the CSS specs say about this? Should overflow:auto and overflow:hidden make an element expand to contain any floating children?

Update: I made a quick test case. Try to break it if you like, and report any problems.

Posted on February 27, 2005 in CSS, Quicklinks

Comments

  1. They should not. The ‘overflow’ property does not affect height or width. It specificies how the content that is too large for the box’ specified height and width sould be treated.

    So I think he is using a browser bug.

  2. February 27, 2005 by Roger Johansson (Author comment)

    I’ve been reading the CSS 2.1 specification and as far as I can tell you’re right about it being incorrect. I can’t find anything that indicates that the box should expand its height to contain any floated ancestors. It’s a bit odd that Gecko, Safari, and Opera all do just that though.

  3. I prefer this method: http://www.positioniseverything.net/easyclearing.html

  4. February 27, 2005 by Roger Johansson (Author comment)

    Amber: Yes, that works well unless you apply it to an element in a non-floated container that is preceded by a floated element. In those situations the easy clearing method will not work as intended. I was hoping this method could let us clear floats without actually using clear.

  5. My mistake, I’m sorry. See the last paragraph of CSS 2.1 10.6.7.

    It applies because the element has non-visible overflow.

  6. February 27, 2005 by Roger Johansson (Author comment)

    Anne: Ah. Excellent! Thanks for finding that info. Looks like this could be extremely useful then.

  7. Based on the last comment by Anne, this could become a pretty nice tool.. Anybody tested this with IE and Peekaboo bugs, Guillotine bugs, and what more ?

  8. February 28, 2005 by stylo~

    “If ‘height’ is ‘auto’, the height depends on the element’s descendants.”

    So height must be set to auto?

  9. Anyone have URLs to some test cases for this?

  10. February 28, 2005 by Roger Johansson (Author comment)

    stylo~: The initial value for height is auto, so no need to set it specifically.

    KevinN: If I have time I’ll clean up my test case later today.

  11. A testcase would be really nice. This might be what we have been looking for a very long time now. Hope it will work :)It is always hard to try to describe why I am using these ‘clearers’ for others.

  12. Was this tested in Opera yet? There are lots of problems, see screen shots of the top and bottom.

    I tried to make it as clear as possible.

  13. Gosh, I need to fix that cookie on my URL!

  14. Opera7 just needs a width and then its fine.

    .floatclear { overflow:hidden; width:100% }

  15. March 1, 2005 by stylo~

    What does it do on Macs: Safari, IE5?

    Btw, looks fine in Opera 8.

  16. I did some testing with my Mac browsers, based on the testcase posted by Roger, and my own. Roger’s testcase works well with IE 5.x Mac, although IE 5.0, OS 9 is a bit rusty. Safari, Gecko 1.0 and newer, Opera 8 all fared rather well.

    Things get a bit more complicated when the container for floated boxes also contains relative/absolute positioned boxes (some Image Replacement techniques I used), or real complex float nesting. IE Mac started showing odd scrolbars, older Gecko(1.4) and Safari 1.0 had some problems as well… Those tests are based on a real world layout I’m working on, and are not available for public consumption.

    I haven’t tested Windows IE, and, as I mentioned above, Peekaboo bugs and other problems need to be tested, and also all those odd jumps when using percentage margins and paddings. I haven’t tested possible problems with wide tables.

    Netscape 4, anyone ?

  17. Paul’s the smartest guy, and most skilled, I’ve ever seen when it comes to CSS. I’m not the only one who knows this to be true; any Sitepoint regular will swear to it on a stack of Bibles.

  18. Its nuts how simple this is and saves me trying to get a min-height hack working in IE. Overflow, I think I love you.

  19. March 2, 2005 by stylo~

    Netscape 4, anyone ?

    No, thank you.

  20. March 2, 2005 by Carsten

    overflow:auto; does not work in Opera 7. It needs overflow:hidden

  21. Or you can do {overflow: auto; width: anything except auto;}. That works in Opera 7.

  22. March 2, 2005 by Carsten

    Please ignore my comment. Now I cannot reproduce the problem with overflow:auto; anymore…

  23. When you combine overflow:hidden and height: 1%, IE5.5 and quirksmodeIE6 will collapse the cleared container to 1% with respect to a determined height of the ancestor.

    This is true if that cleared container is a direct child of body or of a parent that relates its height to body.

    This is a surprising effect when, i.e. in your test case, #wrap and #content (that means, all the ancestors of the cleared container) must have a height: percentage value; (say, according to the Holly hack) or when the #content has a fixed height.

    So my suggestion is to hide the overflow:hidden from IE-Win, or to apply the “layout” for that .floatclear class via _zoom:1; because overflow:hidden is useless in IE-Win and a potential risk.

    Anyway, regarding the browser specific structural problems in Opera7, IE5-Mac, IE5.5, quirksmodeIE6, Geckos with overflow:hidden/auto, I suggest renaming the method in “overflow containing floats”.

    There is no clearing, and it’s not simple.

  24. September 19, 2005 by Alexandru Mihai Bîrsan

    I second Ingo, as this is neither clearing, nor simple.

    There are a lot of problems when the total width (that is, including padding, borders and margins) of the floated elements. Odd scrollbars appear (especially with overflow: auto), content doesn’t show entirely, etc.

    It’s the greatest method I’ve heard of so far, but it’s very-very tricky.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.