Categories
Technology

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.