Stretch an element even though its child element is floated

you have to clear the float via clear:both, so that the wrapper box knows the end.

<div id="wrapper" style="background:red;">
 <div id="child" style="height:500px;float:left;"></div>
 <div style="clear:both;"></div>
</div>

Add a clearfix class to the parent div. Here is the CSS: Fiddle

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }         
.cf:after { clear: both; }

give the parent a height: 0px auto; the initial height in px is what you want it to start at and auto will allow this to adjust based on the height of its children