Louis van Tonder Louis van Tonder - 2 months ago 5
HTML Question

Grow height of parent div that contains floating nested divs

I can't seem to auto-grow my parent div's height based on its floating child divs. All the children are floating, to take up space horzontally, and then wrapping to the next line. There can be a changing number of floating children, and the parent has to autosize its height. (The parent div serves as a background for all the floating divs). There is also a second div below the parent div that needs to be pushed down so that it is below the floating divs.

It's of major importance that the solution works in IE.

Answer

You could insert a div that clears the floaters after the last child.

HTML:

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

fiddle: http://jsfiddle.net/Rc5J8/

Comments