title: Height of outer div not expanding with inner div
body: <p>I have a bodyMain div of 100% width. Inside it is a body div 800px with auto margin(can I use 'body' as id ?). Inside this are two divs bodyLeft and bodyRight 200px and 600px wide respectively. When I add content to inner divs neither bodyMain nor body expands in height . All heights are auto.</p>
  
  <p>Here is the code: <a href="http://jsfiddle.net/TqxHq/18/">http://jsfiddle.net/TqxHq/18/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="bodyMain"&gt;
        &lt;div id="body"&gt;
          &lt;div id="bodyLeft"&gt; left text goes here&lt;br /&gt;
          &lt;/div&gt;
          &lt;div id="bodyRight"&gt;Right text goes here
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#bodyMain{
      border:1px solid red;
      width:100%;
      height:auto;
  
  }
  #body{
      border:1px solid green;
      width:804px;
      height:auto;
      margin:auto;
  }
  #bodyLeft{
       border:1px solid blue;
      float:left;
      width:200PX;
      height:auto;
  }
  #bodyRight{
      border:1px solid orange;
      float:right;
      width:600PX;
      height:auto;
  }
  </code></pre>