Clearing Floats in CSS

Clearing floats:

A common problem with float-based layouts is that the floats’ container doesn’t want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you’ll have to command the browsers somehow to stretch up the container all the way.

I’ve found myself searching for this repeatedly so I’m linking to it here for posterity. The gist of it is to add a width and overflow property to the div containing the floating elements, like so:

div.container {
    overflow: hidden;
    width: 100%;
}

Find This Article Useful?

• Share/Save This Entry

Related Articles

• Extend CSS With Variables, Mixins, Operations and Nested Rules Using LESS
• Great Looking Cross-Browser Forms Using jQuery and Uniform
• Bulletproof @font-face Syntax
• CSS Trick to Auto-Clear Floats
• Transparant PNG Files in Internet Explorer