title: Cannot get my divs to line up side-by-side and fill the page's height
body: <p>I have the following (<a href="http://jsfiddle.net/PaJ3r/" rel="nofollow">jsfiddle</a>):</p>
  
  <p>
  </p>
  
  <pre><code>&lt;div class="content_wrap"&gt;
      &lt;div class="left_container"&gt;
      &lt;/div&gt;
  
      &lt;div class="right_container"&gt;
          &lt;div style="background-color: blue; margin:20px; height: 1500px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body,html {
      height: 100%;
      width: 100%;
      background-color: #f8f8f8;
  }
  
  div.content_wrap {
      width: 100%;
      height: 100%;
  }
  
  div.left_container {
      float:left;
      width: 220px;
      height: 100%;
      background-color: red;
  }
  
  div.right_container {
      position: relative;
      padding: 15px;
      padding-top: 100px;
      width: 1000px;
  }
  
  .clear { clear: both; }
  </code></pre>
  
  <p>​What I'm trying to do is line the <code>div</code>s side by side and have the left side bar (red) stretch to either the height of the page, or the height taken up by the content (which is in blue), which ever is greater (like the layout shown <a href="http://demo.themezilla.com/artiste/" rel="nofollow">here</a>)</p>
  
  <p>My problems at the moment are:
  The content of the right container (The blue box is just to illustrate content) does not align properly next to the left container
  The left container doesn't adjust its height according to the content of the right container.</p>
  
  <p>I've put in a clear fix, although to be quite honest, I don't completely understand how that works.</p>
  
  <p>Would appreciate some guidance.</p>