CSS: Overflow hidden helps clear float elements

This is something I should have known a long time ago, had I actually read a CSS book.
But here is what I learned today.

If you have two floated blocks sitting next to each other, and you want to be able to use a “clear” INSIDE one element, without having it also clear the OUTSIDE block, put “overflow: hidden” in the block you have a “clear” in.

So for example, if you have a #sidebar floating next to a #main. Inside the #main you have two floating images, now you want to clear the floating image inside #main, without it also clearing the floating #sidebar. To accomplish this just put “overflow: hidden” in the #main.

I am guessing this works because the “clear” inside the #main is trapped inside the #main because any overflow of the “clear” is cut off. That make sense right??

This explanation probably makes no sense, but I hope it helps someone.

  • Sebastian Crump

    Thanks, great tip. Unfortunately, doesn’t work for IE6 though :(

  • I am using the adobe three column default layout. I have struggled with the content appearing below the right sidebar content.

    But it overflow method does work for my test three column page in Chrome and Safari on Windows, but on Firefox and IE7 on Windows, the maincontent now clears the LEFT sidebar instead (it might always have done but the right sidebar is longer), whereas before it was clearing the right sidebar. I also had to manually set the width of the main content as it had narrowed in all browsers to less than 1/2 the auto width for the main content.

    This is getting much closer to the solution of the issue of the main content clearfloats forcing the content below the right sidebar. How do I deal with the left one now!? Any comments, anyone, and thank you Vinh Parm!