How Can I Use "float: Left" In A Div Without Breaking The Containing Element's Height?

It seems that floated HTML elements don't expand the heights of their containers. For example, consider the following code: Notice how the containing div with the gray background

Solution 1:

Add overflow: auto on the containing element:

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

<divclass="portfoliosite"><divclass="portfoliothumbnail"><!-- Img tag goes here --></div><pclass="portfoliotitle">AwesomeSite.Com</p><pclass="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p></div>

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

Solution 2:

Yes. You should clear your float when div's closing.

<div><divstyle="float:left">Floated Div</div><divstyle="clear:both;" /></div>

Solution 3:

You need to clear the float, which returns document flow back to normal. Use clear:left (or right, or both if such floats need to be cleared) on the last element that should reset the flow. Also read up on ClearFix. It should be noted that ClearFix can get a little sticky with IE... if you have control over the markup, sometimes it is safer to use the traditional clear.

Solution 4:

You need to clear the float Clear Fix

Some more information