Lowter

Clearing Floats With Ease

Published on the 4th of March 2006

By Ethan Poole

One of the many difficulties of CSS is that parent containers of elements with a float property do not take up vertical space, or wrap around the content it contains. Rather, the container will appear as an element with no height. This creates some styling difficulties for designers, unless they want to add extra markup.

Clearing floats is very useful in a variety of situations, as the majority of CSS layouts involve placing smaller elements inside a larger wrapping element. Overtime, many techniques for clearing floats have developed; some being complex and the others being simple.

Instead of discussing confusing methods involving unneeded markup or CSS styling, I will be keeping it simple. Recently when redesigning my blog, I came into the dilemma where I needed to clear a float in order to apply a border around the main container.

I searched around the web and came upon a method better and easier for clearing floats, which works great. Simply add overflow: auto to the outer element and it clears and wraps all of its child elements. It is hard to believe, but it works like a charm.

Of course, such a simple solution could never work in Internet Explorer, but your visitors cannot have everything. If you must use a cross-browser technique than you can always use the traditional solution to clearing floats (external link).

Opera 9. Innovation delivered. Download Now (external link)