so i have 4 divs (i actually have many more but this will simplify the question). i want to display them in two columns. the 4 divs vary in height. the number of actual divs in the end will vary. so if i have this

<div id="1" style="height: 200px" class="inline">some content here</div>
<div id="2" style="height: 600px" class="inline">some content here</div>
<div id="3" style="height: 300px" class="inline">some content here</div>
<div id="4" style="height: 200px" class="inline">some content here</div>

with styling thus

.inline { display: inline-block; vertical-align: top; width: 48%;}

so #1 would go left and then #2 would shove up beside it to the right, great, but the #3 will not slide up the 400px to fit nicely below #1. (of course)... it goes on the left side but at 600px from the top clearing the bottom of #2. etc...

how would i get the divs to slide up into the empty spaces, is it possible with css? jquery maybe? i know i could write column divs to mark it up, but since the number of divs constantly change and the heights vary according to content. It would be nice to just get rid of the space since we dont really care about the order.

any thoughts?