title: Parent Height doesn't follow their float children
body: <p>My mainContainer height doesn't follow their children width</p>
  
  <p>and here is my code do you have any suggestion please advise.</p>
  
  <p>I need the CSS solution not JavaScript so thank in advance</p>
  
  <pre><code>&lt;div id="mainContainer"&gt;
      &lt;div id="leftContent"&gt;
  
      &lt;/div&gt;
  
      &lt;div id="rightContent"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my css</p>
  
  <pre><code>#mainContainer{
      width: 1000px;
      /*height: 1000px;*/
      height:auto;
      margin-left:auto;
      margin-right:auto;
      background-color: #ff6600;
      padding-bottom: 20px;
  }
  #leftContent{
      height: 100px;
      float: left;
      width: 380px;
      background-color: violet;
  }
  #rightContent{
      height: 100px;
      float: right;
      width: 620px;
      background-color: yellow;
  }
  </code></pre>