title: Parent div is not taking height according to its children height.
body: <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="body"&gt;
      &lt;div id="left"&gt;a&lt;/div&gt;
      &lt;div id="main"&gt;b&lt;/div&gt;
      &lt;div id="right"&gt;c&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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}
  </code></pre>
  
  <p>Why doesnt #body surround div#left,#div#main, div#right </p>
  
  <p>If i set display : table it is ok</p>