Stupidly simple way to clear floats with CSS
I discovered this method of clearing floated elements (this may be old news to some of you) in a layout using CSS while searching the web for alternatives to inserting extra markup just so the layout will look right (I’m looking at you, <div style="clear:both"></div>). This is just brilliant, a single style declaration, “overflow: auto;” to the element containing the floats and that’s it. It seems to work with all major browsers, which includes Firefox, Mozilla, Internet Explorer 6 & 7, Opera and Safari.
There is an extra step to make this work in Internet Explorer 6 though. A dimension needs to be applied to the element that the overflow:auto; declaration is being applied on in order to trigger the hasLayout property in the element.
draco said,
January 27th, 2007 at 2:34 pm
I bet you already knew this but just in case you run into situations where overflow:auto; won’t work for you (because it had happened for me), here’s another one http://www.positioniseverything.net/easyclearing.html.
Doug said,
February 17th, 2007 at 12:01 pm
Thanks for the article link, Draco. I’ve actually read the article before and used the fix in other projects. I used the overflow:auto; declaration in a more recent project as it was simpler to add compared to the method described in the article.
Floating the containing elements didn’t work out that nicely for me as well because it messed up the layout and it would have taken more time than I would have liked to update the styles.
draco said,
February 17th, 2007 at 11:55 pm
No problem dude, whatever that floats your boat ;-)