balanced alternating column layout in CSS3

css

Solution

I would say this is not possible without JS. Here is a fiddle I made based on an article from Ben Holland. At least to me looks like what you are after.

http://jsfiddle.net/QWsBJ/2/

HTML:

<body onload="setupBlocks();">
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
</body>

CSS:

.block {
  position: absolute;
  background: #eee;
  padding: 20px;
  width: 300px;
  border: 1px solid #ddd;
}

JS:

var colCount = 0;
var colWidth = 0;
var margin = 20;
var blocks = [];

$(function(){
    $(window).resize(setupBlocks);
});

function setupBlocks() {
    colWidth = $('.block').outerWidth();
    colCount = 2
    for(var i=0;i<colCount;i++){
        blocks.push(margin);
    }
    positionBlocks();
}

function positionBlocks() {
    $('.block').each(function(){
        var min = Array.min(blocks);
        var index = $.inArray(min, blocks);
        var leftPos = margin+(index*(colWidth+margin));
        $(this).css({
            'left':leftPos+'px',
            'top':min+'px'
        });
        blocks[index] = min+$(this).outerHeight()+margin;
    }); 
}

Array.min = function(array) {
    return Math.min.apply(Math, array);
};

Problem

I'm trying create a balanced (2-) column-layout. The content is not text but blocks and varies in height. The content should be placed alternatingly left and right, as long as "left" and "right" have (roughly) the same height.. I.e. in this image: The space between 1 and 3's shouldn't be there. Or in this image: the 2's should stand alone on the right side and the 1, 3's and 4 should stand on the left side (without space between them). I tried using "floating `<li>`'s" like this: HTML: ``` <ol class="context"> <li class="gruppe">1</li> <li class="gruppe">2.0<br />2.1</li> <li class="gruppe">3.0<br />3.1</li> <li class="gruppe">4</li> </ol> ``` CSS: ``` ol.context { border: 1px solid #048; list-style: none; margin: 0; padding: 0 0 8px 0; overflow: auto; } li.gruppe { background: #048; color: white; float: left; font: bold 32px Arial, sans-serif; margin: 1px; text-align: center; width: calc(50% - 2px); } ``` (See attempt 1 and attempt 2) I have also tried to use column's (`column-count: 2; column-fill: auto;`) but this does not fill the columns left-to-right first. (It fills top-to-bottom first.) Is this even possible without JavaScript?

Original source