title: 2 column layout with 100% height
body: <p>I have a 2 column layout with both 100% height.
  The problem is when the right column with content is larger then the left content where the menu will be the left column is empty when i scroll down.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div id="left"&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="right"&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
              &lt;br /&gt;&lt;p&gt;test test test&lt;/p&gt;
          &lt;/div&gt;
  
              &lt;div class="clearfix"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    html {
               height:100%;
      }
  
      body {
          height:100%;
          margin:0;
          padding:0;
      }
  
      #container {
          height:100%;
      }
  
      #left {
          float:left;
          width:200px;
          background-color:blue;
          min-height: 100% !important;
      }
  
      #right {
          margin:0 0 0 0px;
          background-color:red;
          width:1000px;
          min-height: 100% !important;
          float:left;
      }
  
      .clearfix {         
          clear: both;
      }
  </code></pre>
  
  <p>And here is a <a href="http://www.jsfiddle.net/F9rdh/" rel="nofollow">Fiddle</a> to demonstrate...</p>