1 Posted by Daniel Parks on 8 March 2005 | Permalink

This is really a comment on your page about the technique.

You said, "Personally I don't quite understand all this, the more since there doesn't seem to be any reference to overflow in this part of the spec."

If you look at the sections in the CSS 2.1 spec above the one referenced, you will see that there are a number of other cases that are already handled. Non-replaced block level elements with overflow: visible are handled in section 10.6.3. Section 10.6.6 handles the non-visible overflow case, and specifically mentions 10.6.7.

Hope that clears it up.

2 Posted by nobody on 11 March 2005 | Permalink

"Since Explorer (Win and Mac) doesn't support :after this second solution was mainly of theoretical interest."

It worked quite well with an additional small hack:
http://www.positioniseverything.net/easyclearing.html

3 Posted by kala on 13 April 2005 | Permalink

Thank you www.quirksmode.org! This is the trick I've been searching for a long, long time. It gives whole new possibilities to create dynamic html with floats - without using that oldfashioned table-layout.

4 Posted by Walter on 26 April 2005 | Permalink

Hi, thanks for this trick! There seems to be a problem with IE/Mac when it comes to centering the container div with margin:0 auto;.

Example: http://www.vividvisions.at/clearing_test.html

(Don't beat me for assigning one id to multiple divs, I just wanted to show the problem. ;-) )

I haven't found a workaroung yet...

Walter

5 Posted by Stuart Bertram on 27 April 2005 | Permalink

Is it just me (and me being awkward) or does this not work in Opera 6 (and Mozilla 0.9!)? I'll check again tonight, when I've got my test browsers available, but I think Opera didn't clear, and Mozilla 0.9 was giving scroll bars (although that might have been when I had something else in the CSS). If anyone wants to check out the pages I'm working with - http://hiveworldterra.dowfiles.com/Downloads/ and one of the categories should have a multi-column list at the top (only one column has content on the main page) made of Floats, cleared using this method.

Thanks

6 Posted by Kailash Nadh on 27 April 2005 | Permalink

This is NEAT! I've spent hours,days and even weeks trying to fix the 'float' problem!! This is really cool and I am really thankful to you for providing such a cool piece of code :)

Good Luck !

7 Posted by Jason on 13 May 2005 | Permalink

Has anyone had problems with this technique and Netscape 7? I removed all my clearing divs and added the overlow:hidden and everything works fine in IE, FireFox, and Opera but Netscape chokes on it like crazy.

8 Posted by Sebconn on 14 May 2005 | Permalink

Worked like a charm! cheers.

Only issue I found was that my CSS image background dissappeared in Firefox

9 Posted by Small Paul on 19 May 2005 | Permalink

Jason: I believe Mozilla prior to 1.4 doesn't support this method very well. Mozilla 1.01 (used by Netscape 7.01) makes elements I use this on disappear.

Quirksmode doesn't test versions of Mozilla before 1.6, as they're too old and buggy.

10 Posted by fragment2501 on 17 June 2005 | Permalink

Thanks for posting this trick. The clear method was giving me headaches. I owe you a coke!

11 Posted by Jay on 21 June 2005 | Permalink

I used the same code as PPK, except for one thing. The container-width is set to 12 pixels.
So I discovered another feature in Ie 5.5. an Ie 6.0 on Windows.
Look for the result: a small scroll bar. Very strange. At least that's my
opinion. see: http://allesoptien.nl/x.html

12 Posted by Massimo on 6 July 2005 | Permalink

Thank you! This is GREAT! I never liked the "clear" method and the ":after" method is a bunch of hacks. This is ultimate. Thanks.

@Jay
Try using overflow:hidden as recommended.

13 Posted by Martin on 7 July 2005 | Permalink

Best clear-cut code I've seen regarding floats.

14 Posted by Christian a de Besche on 15 July 2005 | Permalink

Great pages.
I can confirm post 7 and 9. My test on Netscape 6.2.1Win show the same thing: both auto and hidden may completely hide the container content. The effect is somewhat transient. At some reloads the actual content is displayed. Can't figure out what triggers this behaviour.

Works great in Windows: IE5.5, IE6, Opera 7.54, Firefox 1.0, and Mac: Safari 1.03.
Can't get IE5.2MacOSX to do it right...it adds the floats underneath and hidden by sibling container-boxes (but then again, the "old" box-clearing doesn't work on my testpage either).

15 Posted by Mr_Light on 15 September 2005 | Permalink

if the parent 'float's it also seems the fix the problem

div.container {
border: 1px solid #000000;
float: left;
width: 100%;
}

div.left {
border: 1px solid #000000;
width: 45%;
float: left;
}

div.right {
border: 1px solid #000000;
width: 45%;
float: right;
}

but it does create some problems with respect to having to do it all the way up the tree.

16 Posted by Malcolm Cowe on 6 October 2005 | Permalink

For those of us stuck with supporting Mozilla 1.4, this trick does not work when using overflow: hidden. Moz1.4 will hide the child div element.

In this case your only recourse is to use overflow: auto.

17 Posted by kira on 13 October 2005 | Permalink

Great trick. Next challenge -- what if you want the shorter column (right, in this case) to align to the bottom of the container? I've been going in circles trying to figure that one out...

18 Posted by Richard on 22 October 2005 | Permalink

Thank you, thank you. I have been looking for a solution to stretch my backgrounds down to encompass floating divs without resorting to the old clear gif html hack. Don't really understand WHY it works, just glad it does!

19 Posted by Bryan on 29 November 2005 | Permalink

I ran into kira's problem where I needed to do something like a table valign=bottom. Found some info on this that helped me solve my issue:

http://www.badboy.ro/articles/2005-02-20/index.php

20 Posted by Tom on 26 January 2006 | Permalink

Adding overflow: hidden; into a container also solves the problem of aligning, say, a text div to the bottom of a float div. The Divs were structured such:

Container > Image Float > Text

Instead of declaring position: relative; to the Image Float (incorrect), when I added overflow: hidden; to the container, the absolute positioned text found its correct place! :)

21 Posted by some1else on 27 January 2006 | Permalink

Thanks for sharing, I wasn't aware of this aproach. I've read the PIE Easy Clearing article, and personally, I thought it wasn't really easy clearing. But this is really easy, as you would normally put the floated elements in a container anyway. Thanks again.

22 Posted by James Holmes on 28 July 2006 | Permalink

What on Earth would we do without quirksmode.org? This article was the only one I found that did exactly what I needed. Thanks heaps.