Div with height is 0px, it does not grow in relation to their children

I have the div div.home-top with two other divs div#home-content as float:left and div#home-buttons as float:right.

And below the div#home-top got the div#home-footer as clear:both

My 开发者_开发问答div#home-top is the minimum size. I put it in red, but I can not see it. How to make the div#home-top take on the height divs children. See the code.

Add overflow: hidden; to the CSS for div#home-top:

div#home-top
{
    background-color:Red;
    overflow: hidden;
}

JS Fiddle demo

Floated divs have no height, so .home-top does not expand. You will need to give it an explicit height or unfloat the inner elements.