Skip to main content

My element isn't expanding/stretching properly! (PS, I have a floated element inside it)

This is a very common problem known as "float containment". If you have a container with floated elements inside it, you sometimes find that the container doesn't stretch to the width/height that it should.

The WRONG way to fix this

Place a "clearer div" after the container, eg: <div style="clear:both;"></div>

The RIGHT way

Assuming #foo is the containing element.

#foo {
    overflow: hidden; /* For modern browsers and IE7 */
    display: inline-block; /* For IE6 */
}
  
#foo { display : block; } /* For IE6 */

But if you don't want to have overflow: hidden; on the container:

#foo:after { /* For modern browsers */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#foo { display : inline-block; } /* For IE6/7 */
#foo { display : block; } /* For IE6/7 */

Further Reading

Credits

Back to top