Best Way To Clear Floats
Saturday, June 28th, 2008
One of the greatest challenges of a CSS developer would be dealing with floated elements that “spill” its contents outside the parent element. This is known as the float bug. Fortunately there are many techniques to address this issue. One method involves creating an additional blank element, which I find semantically wrong but it does get the problem fixed.
A “semantically correct” fix should only involve elements that already exist. The quirksmode.org technique is probably the best way to achieve this.
The code looks like this:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
It is a purely CSS solution that does not require any additional tags. All you need to do is add a width and overflow rule to the parent element. The technique works flawlessly on all the major browsers: Internet Explorer 6+, Firefox 2+, Safari, and Opera.
Happy coding!
