title: div element not filling to the height of its container div
body: <p>I have the following layout: (<a href="http://jsfiddle.net/ETYzR/" rel="nofollow">jsfiddle</a>)</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;div class="main_container"&gt;
  
      &lt;div class="left_container"&gt;
      &lt;/div&gt;
  
      &lt;div class="right_container"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.main_container {
      background: #000; 
      border: none;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -khtml-border-radius: 15px;
      border-radius: 15px;
      width: 100%;
      min-height: 400px;
      margin: auto;
  }
  
  div.left_container {
      float:left;
      position:absolute;
      width: 220px;
      background: red;
      margin: 0;
      min-height: 100%;
      padding: 0;
  }
  
  div.right_container {
      position: relative;
      margin-left: 220px;
      width: 715px;
      height: 100px;
      background: blue;
  }
  </code></pre>
  
  <p>I can't seem to get the left (red) container to fill the height of the main container, where the content of the right container has the possibility to increase the height of the main container (a non-jQuery solution).</p>
  
  <p>Would appreciate some guidance.</p>