CSS columns using inline-block divs - css

Question

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.
I've created this:
http://jsfiddle.net/JWjxP/1/
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.
All the divs have the following rules (plus various heights):
.test1, .test2, .test3 {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
float: left;
}
and the wrapper has the following rules:
.content {
background: #999;
height: 100%;
text-align: left;
}

Answer 1

You can accomplish this by breaking your test divs into two parent divs and applying inline-block display to those parents instead of the test divs themselves. This allows content to flow freely within the parent, and allows the divs to be positioned beside one another with no "gap" above.
HTML:
<div class="pure-u-3-4 content">
<div class="left">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
<div class="right">
<div class="test3">4</div>
<div class="test1">5</div>
<div class="test2">6</div>
</div>
</div>
CSS:
.left, .right {
background: white;
display: inline-block;
border: 1px solid black;
width: 50%;
margin-right:-4px;
vertical-align:top;
}
.test1, .test2, .test3 {
width:100%;
}
FIDDLE: http://jsfiddle.net/JWjxP/27/