CODEWITHSUNDEEP
htmlcss
Keld Jakobsen
Keld Jakobsen

Reputation: 193

Parent div is not taking height according to its children height.

Here is my code:

HTML

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
</div>

CSS:

#body {    width: 520px;    border:solid 10px #d2d2d2;}
#left { float:left;width:170px;height:200px}
#main { float:left;width:170px;height:400px}
#right { float:left;width:170px;height:200px}

Why doesnt #body surround div#left,#div#main, div#right

If i set display : table it is ok

Upvotes: 5

Views: 21624

Answers (4)

SVS
SVS

Reputation: 4275

Add overflow:hidden to #body css.

#body {    width: 520px;    border:solid 10px #d2d2d2; overflow:hidden;}

OR

Use any class (e.g. clearfix) on the parent element. Refer CSS Trick article for reference: https://css-tricks.com/snippets/css/clear-fix/

Upvotes: 23

voy
voy

Reputation: 1748

Try this:

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
    <div style="clear:both;"></div>
</div>

Upvotes: 3

Sameh Serag
Sameh Serag

Reputation: 746

 #body { 
    overflow:hidden;
 }

Upvotes: 4

Quentin
Quentin

Reputation: 943569

The float property is designed to allow content to drop through the bottom of the block containing it because it is intended to be used for things such as images which multiple paragraphs should wrap around.

See containing floats for more details and examples.

Set overflow: hidden on #body to cause the container to expand to contain all the floating elements inside it. Alternatively see some other techniques.

Another approach, although one that doesn't work in particularly old versions of Internet Explorer is to use display: inline-block instead of float.

Upvotes: 12

Related Questions