How To Clear Floats The Right Way

When I was working on the template for this very blog I realized that I was still using the lame old <br style="clear:both;" /> way to clear floating elements. You know how we are all lazy and tend to stick to tried and tested methods, especially when our sites have to work properly in a multitude of browsers, but this time, after half a decade of clearbothing I thought enough was enough: It's 2012, there has to be a better way to do all this.

So, I took the time, did a little research and found out that indeed there was a better way, and to top that it's very simple and elegant!

Here's how to do it:

In order to have the containing div extend to the height of the largest child element, simply add the

overflow: auto;

CSS property to the containing div. For extra IE6 pleasure you can also add

zoom: 1;,

not that anyone still using that browser cares about how websites look like. Well, that's it! Hope I'm not the only one who didn't know this.