title: Chrome clear-fix
body: <p>I am working on some website template for my new project but having some trouble making the sidebar fill the height of its container. I tried all clear-fixes but none of them seem to work (tested in Chrome). So I'm wondering, what's wrong with my code or does anyone know what'd be the right way to fix it for my code? This is the code of subject:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="header"&gt;
      &lt;div class="logo"&gt;
          &lt;a href="#"&gt;&lt;img src="images/logo.png" border="0" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="nav"&gt;
          &lt;a href="#" id="current"&gt;Home&lt;/a&gt;
                  ...
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="below_header"&gt;
      &lt;div class="user_message"&gt;
                 ...
      &lt;/div&gt;
      &lt;div class="quick_stats"&gt;
                 ...
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;div class="content"&gt;
      &lt;div class="bar_blue"&gt; ... &lt;/div&gt;
      &lt;div class="content_text"&gt; 
      &lt;div class="content_info"&gt;
                  ... text ...
      &lt;/div&gt;
      &lt;div class="quick_create"&gt;
                  ...
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bar_white"&gt;
          Some Title
      &lt;/div&gt;
      &lt;div class="content_text"&gt;
  
      &lt;/div&gt;
      &lt;div class="footer"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="sidebar"&gt;
      test
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>div.container {
      overflow: auto;
      margin-left: auto;
      margin-right: auto;
      width: 900px;
      //height: 100%; 
      border: 1px solid #E0E0E0;
      border-top: 0px;
      border-bottom: 0px;
  }
  
  .container {
      display: inline-block;
  }
  .container:after {
      content: " ";
      display: block;
      height: 0;
      clear: both;
      overflow: hidden;
      visibility: hidden;
  }
  div.content {
      float: left;
      width: 635px;
      height: 100%;
  }
  
  div.sidebar {
      float: left;
      width: 262px;
      height: 100%;
      background-image: url("images/sidebar.png");
      background-repeat: repeat-y;
  }
  </code></pre>
  
  <p>Where <code>div.content</code> and <code>div.sidebar</code> are the only floating divs which need to be equal height. Right now the sidebar doesn't match the height of the floating content div left of it (which is larger than the sidebar). Tried all clear-fixes but none worked. How can I fix this?</p>