Div containing other divs does not have proper height

css, height, html

Solution

The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add `overflow:auto` to your CSS rules for `#frm` to bring the background back and "contain" the floated children:

#frm {
    background: red;
    width: 100%;
    height: auto;
    overflow:auto;
}

jsFiddle example

Problem

I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main `div` does not have the proper height to englobe the inner divs. Here is the HTML: ``` <div id="frm"> <div id="a">aaa<br>aaa</div> <div id="b">bbb</div> </div> ``` and the CSS: ``` #frm { background: red; width: 100%; height: auto; } #a { background: blue; float: left; } #b { background: green; float: right; } ``` Here is the JsFiddle: http://jsfiddle.net/mPH4H/ I should see a red frame, but there is none.

Original source