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

Question

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

Answer 1

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/