CODEWITHSUNDEEP
htmlcss-float
UserIsCorrupt
UserIsCorrupt

Reputation: 5025

Stretch an element even though its child element is floated

<div id="wrapper" style="background:red;">
 <div id="child" style="height:500px;float:left;"></div>
</div>

How can I make #wrapper stretch with the height of #child?

Upvotes: 0

Views: 70

Answers (3)

shaunsantacruz
shaunsantacruz

Reputation: 8930

Add a clearfix class to the parent div. Here is the CSS: Fiddle

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }         
.cf:after { clear: both; }

Upvotes: 1

thisisablock
thisisablock

Reputation: 559

you have to clear the float via clear:both, so that the wrapper box knows the end.

<div id="wrapper" style="background:red;">
 <div id="child" style="height:500px;float:left;"></div>
 <div style="clear:both;"></div>
</div>

Upvotes: 2

zero
zero

Reputation: 3084

give the parent a height: 0px auto; the initial height in px is what you want it to start at and auto will allow this to adjust based on the height of its children

Upvotes: 0

Related Questions