title: CSS columns using inline-block divs
body: <p>I'm trying to use inline-block divs to create a two-column feed (like google+ or pinterest), and for a number of reasons can't use CSS3 columns (partially because both columns should fill with the first elements, not just the first column). Ideally, I'd also like to avoid Javascript, but if that's impossible then whatever.</p>
  
  <p>I've created this: </p>
  
  <p><a href="http://jsfiddle.net/JWjxP/1/" rel="nofollow noreferrer">http://jsfiddle.net/JWjxP/1/</a></p>
  
  <p>and am wondering why the div labeled '4' doesn't flow to fill the gap above it (like 3 does). I'd like for all the divs to begin at where the div above ends, with no space in between. </p>
  
  <p>All the divs have the following rules (plus various heights):</p>
  
  <pre><code>.test1, .test2, .test3 {
    background: white;
    display: inline-block;
    border: 1px solid black;
    width: 50%;
    float: left;
  }
  </code></pre>
  
  <p>and the wrapper has the following rules: </p>
  
  <pre><code>.content {
    background: #999;
    height: 100%;
    text-align: left;
  }
  </code></pre>