title: CSS min-height not working properly
body: <p>Here is the situation, I have this html:</p>
  
  <pre><code>&lt;div id='main'&gt;
      &lt;div id='menu'&gt;
          Menu Items Here
      &lt;/div&gt;
      &lt;div id='cont'&gt;
          Content Here
          &lt;div id='footer'&gt;Some Footer&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS here:</p>
  
  <pre><code>html, body {
     height: 100%;
     width : 100%;
     margin: 0;
     padding: 0;
  }
  
  #main{
      overflow : auto;
      background-color: yellow;
      width : 100%;
      min-height : 100%;
  }
  
  #menu {
      background-color: red;
      float : left;
      width : 300px;
  }
  
  #cont {
      margin-left : 300px;
      float : right;
      background-color: orange;
      width : 100px;
      min-height : 100%;
      height: auto !important; /*min-height hack*/
      height: 100%;            /*min-height hack*/
  }
  </code></pre>
  
  <p>What I want to do basically is #cont div must have a min height of 100% (if I have small content) but will extend if have longer content.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Note: The width size is just temporary for now.</p>
  
  <p>Thanks!</p>