display divs inline-block in 2 columns without vertical gaps - html

Question

Quite a simple problem, but I can't seem to find a solution (using pure css, I'd like to avoid things like Isotope). I have a 2 column grid, the divs displayed inline-block so they fill the .wrap div, problem is though because the divs have variable heights, there are massive gaps below the divs in the right hand column.
jsFiddle demo: http://jsfiddle.net/neal_fletcher/ntyLg/
HTML:
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
CSS:
.wrap {
position: absolute;
width: 500px;
height: auto;
}
.test {
width: 240px;
background-color: orange;
display: inline-block;
vertical-align: text-top;
margin-bottom: 5px;
}
.test:nth-child(odd) {
height: 200px;
}
.test:nth-child(even) {
height: 100px;
}
Any CSS only solutions to such a problem? Any suggestions would be greatly appreciated!

Answer 1

As it is you don't actually have two columns, so you need something like this:
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
</div>
<div class="wrap">
<div class="test"></div>
<div class="test"></div>
</div>
Fiddle
Here is it working with different css
Or you could have a .column class if you wanted:
<div class="wrap">
<div class="column">
<div class="test"></div>
<div class="test"></div>
</div>
<div class="column">
<div class="test"></div>
<div class="test"></div>
</div>
</div>