How can I use “float: left” in a div without breaking the containing element's height?

Question

It seems that floated HTML elements don\'t expand the heights of their containers. For example, consider the following code:

Answer 1

Add overflow: auto on the containing element:

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
    overflow: auto;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}

    
        
    
AwesomeSite.Com
    
An awesome site I did. It launched on Jan 1, 2009
        

See: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats