Here’s a quick tip that will be useful for dealing with content that “overflows” outside of the normal boundaries. Any web designer I’m sure has encountered this issue at some point or another and you may be surprised to find how easy it is to correct. In this example we have an outer div “main content” area in green with a gray div “column” floated to the left with more content than the area will contain given the column’s width. As you can see in the example, the result is that the floated column extends beyond the lower boundaries of the outer div. This is less than ideal, especially when your site’s content is generated dynamically.
This first solution has stood the test of time and is known as the clearfix method. This technique uses the :after pseudo-element which is supported by CSS2 compatible browsers. Unfortunately, this doesn’t include Internet Explorer 7 and below. You may notice that there is actually two style blocks for our CSS and that is because we are using conditional comments that will target any Internet Explorer browser and use the proprietary hasLayout CSS attribute that must be commented or else your page will not validate.
Another method uses an additional
Finally there is a relatively newly discovered technique which is quite easy to implement and is one which doesn’t require additional markup. It simply involves adding a “overflow: auto” property to the outer
Half an hour of testing later, I was amazed to find Paul was 100% correct – as this example shows. It seems that reminding the outerthat it’s overflow is set to ‘auto’, forces it to think “oh yeah.. I’m wrapping that thing, aren’t I?”.
–Alex Walker, sitepoint.com
So there you have it, three different techniques that will help you clear all of those pesky float issues.