title: Make left column in 2 column layout take up 100% height with Sticky Footer
body: <p>I'm trying to figure out how to make the left column <strong>take up 100% height in a 2 column layout with a sticky footer</strong>.  The goal is for the sticky footer to <strong>not get stuck until it runs into the content of the left column</strong>.  I'm using the negative margin approach to the sticky footer.</p>
  
  <p>Please look at the JSFiddle below.</p>
  
  <p><a href="http://jsfiddle.net/x11joex11/2Ljgze37/8/" rel="nofollow">http://jsfiddle.net/x11joex11/2Ljgze37/8/</a></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>/* Set Defaults */
  * {height:100%;margin:0;}
  .wrapper{
      background-color:rgba(0,0,0,0.25);
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin:0 auto -50px;
  }
  .clear {clear:both}
  
  /* Create Header */
  .header{
      height:50px;
      background-color:rgba(0,255,0,0.5);
  }
  
  /* Content */
  .content{
      height:100%;
      padding-right:100px;
  }
  
  /* Left Column */
  .leftside{
      float:left;
      height:100%;
      width:100px;
      background-color:rgba(0,0,255,0.5);
  }
  
  /*Right Column*/
  .rightside{
      float:right;
      margin: 0 -100px 0 0; width: 100%;
      background-color:rgba(255,0,255,0.5);
  }
  .push{
      height:50px;
  }
  .stickyfooter{
      height:50px;
      background-color:rgba(255,0,0,0.75);
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="header"&gt;Header&lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;div class="leftside"&gt;
              Left Menu&lt;br/&gt;&lt;br/&gt;
              Home&lt;br/&gt;&lt;br/&gt;
              Page #1&lt;br/&gt;&lt;br/&gt;
              Page #2&lt;br/&gt;&lt;br/&gt;
              Page #3&lt;br/&gt;&lt;br/&gt;
          &lt;/div&gt;
          &lt;div class="rightside"&gt;
              Right Content (lorem ipsum forgot the rest)
              (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
              (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
              (lorem ipsum forgot the rest)(lorem ipsum forgot the rest)
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;div class="push"&gt;&lt;/div&gt;
      &lt;/div&gt;   
  &lt;/div&gt;
  &lt;div class="stickyfooter"&gt;Footer&lt;/div&gt;
  </code></pre>