Splitting / layout div using css or javascript

Question

so I have 4 divs (I actually have a lot more, but that will simplify the question). I want to show them in two columns. 4 divs vary in height. the number of actual divs at 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 style that way

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

so # 1 will go left and then # 2 will bounce right next to it, great, but # 3 will not slide up 400 pixels to fit each other below # 1. (of course) ... it comes with left side, but 600 pixels from the top, clearing the bottom of No. 2. etc.

how could I make divs move to empty spaces, is this possible with css? Maybe jquery? I know that I can write div columns to label it, but since the number of divs is constantly changing and the height depends on the content. It would be nice to just get rid of the space, since we really do not care about the order.

any thoughts?

Answer 1

Unfortunately this is not possible with pure CSS, you will 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

, , CSS. jQuery :

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

Answer 2

, . , , , , http://jsbin.com/emeja

HTML :

<div style="height: 200px" class="box-left">some content here</div>
<div style="height: 600px" class="box-right">some content here</div>
<div style="height: 300px" class="box-left">some content here</div>
<div style="height: 200px" class="box-right">some content here</div>

CSS :

.box-left { float: left; clear: left; width: 48%;}
.box-right { float: right; clear: right; width: 48%;}

, , .

Answer 3

div .

<div id="content" style="overflow: hidden;">
  <div id="left" style="width: 48%; float: left;">
    <!-- This is where every odd numbered div goes -->
  </div>
  <div id="left" style="width: auto; margin-left: 50%;">
    <!-- This is where every even numbered div goes -->
  </div>
</div>

for-loop div, :

// Render Header
for(int i = 0; i < list.count(); i++)
{
   if (i % 2 == !)
     continue;

   // Render my div inside left colunm
}

// Render In-Between

for(int i = 0; i < list.count(); i++)
{
   if (i % 2 == !)
     continue;

   // Render my div inside left colunm
}

// Render Footer

, , divs .

Answer 4

IE (Divs ), FF .. (. this page - - , !)

, ...

JQuery treeMap?

http://newsmap.js , , ? , , treeMap - , .

Rob