Question

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?

Answer 1

Unfortunately this is impossible with pure CSS, you are going to need separate divs for each column. Fortunately, you can achieve this using jQuery. Something like this should do the trick:

$(function() {
    var odd_divs = $('div.inline:odd');
    var even_divs = $('div.inline:even');
    var left = $('<div id="left-column" class="column"/>').append(odd_divs);
    var right = $('<div id="right-column" class="column" />').append(even_divs);
    $('#somewhere').append(left).append(right);
});

And change your CSS to this:

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

EDIT

As Brian McKenna noted, it is actually possible to achieve this effect using CSS floats. You can use jQuery to add the classnames as so:

$(function() {
    $('div.inline:odd').addClass('box-left');
    $('div.inline:even').addClass('box-right');
});