Grow height of parent div that contains floating nested divs

Question

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 horizontally, an

Answer 1

You need to clear floated elements the height of their parents will collapse.

The current accepted answer is correct, however it's usually a better idea to clear floats by applying the clearfix hack or overflow: hidden to a wrapping parent element so that margins continue to functions as expected, and to get rid of an empty HTML element.

The overflow-method:

CSS:

.wrap { overflow: hidden }
.box  { float: left; }

Markup:

    

        Content
    

    

        Content
    

The clearfix-method, as linked above:

CSS:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

.box { float: left; }

Markup:

    

        Content
    

    

        Content