CODEWITHSUNDEEP
htmlcsslayoutcss-float
ridermansb
ridermansb

Reputation: 11069

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.

Upvotes: 3

Views: 3524

Answers (2)

David Thomas
David Thomas

Reputation: 253506

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

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

JS Fiddle demo

Upvotes: 11

George Cummins
George Cummins

Reputation: 28936

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.

Upvotes: 2

Related Questions