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.
- Previous post: Language tags in HTML and XML
- Next post: Content management with Plone
Sponsors
Authentic Jobs
Job openings from Authentic Jobs
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost
Comments
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.
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.
I prefer this method: http://www.positioniseverything.net/easyclearing.html
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.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.
Anne: Ah. Excellent! Thanks for finding that info. Looks like this could be extremely useful then.
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 ?
“If ‘height’ is ‘auto’, the height depends on the element’s descendants.”
So height must be set to auto?
Anyone have URLs to some test cases for this?
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.
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.
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.
Gosh, I need to fix that cookie on my URL!
Opera7 just needs a width and then its fine.
.floatclear { overflow:hidden; width:100% }
Here’s something from Anne:
http://annevankesteren.nl/archives/2005/03/clearing-floats
What does it do on Macs: Safari, IE5?
Btw, looks fine in Opera 8.
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 ?
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.
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.
No, thank you.
overflow:auto; does not work in Opera 7. It needs overflow:hidden
Or you can do {overflow: auto; width: anything except auto;}. That works in Opera 7.
Please ignore my comment. Now I cannot reproduce the problem with overflow:auto; anymore…
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.
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, but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.