div stacking/layout with css or javascript

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

You prettymuch have to split the colunms up and assign every second div to a different container.

<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>

If you're having trouble selecting your content in your for-loop for creating these arbitrary divs this will help:

// 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

This code relys on the modulo to select your items from your list and should put them in the right place, then your internal divs should sit right underneath each other inside a colunm.

Answer 2

I'm not sure if I understand the problem correctly. I'm guessing you want it to look like this example I just made, http://jsbin.com/emeja

The HTML I used was like so:

<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>

The CSS is like so:

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

The trick is floating the boxes, clearing them so that boxes won't show up next to boxes in the same column.

Answer 3

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');
});

Answer 4

Have you tried a layout with absolute placement?

Answer 5

You can do it in IE (the Divs will snuggle-up nicely) but doesn't work in in FF etc (see this page for an example - the links to the right use this theory - I should know, I tried to fix it!)

However, here's a thought from the left-field - may seem like overcomplicating the issue a little but...

JQuery treeMap?

Goto http://newsmap.js and scratch your brain trying to work out how they did it too? It sounds mad, but that, and treeMap are more complex version of what you are trying to achieve.

Rob