balanced alternating column layout in CSS3

Question

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

Answer 1

I'm not sure if I got this right . .

"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)."

html:

    
1
    
2
2
2
2
    
3
3
    
4

css:

#box {
    width:100%;
    height:auto;
    float:left;
}
.data {
    height:auto;
    width:50%;
    float:left;
    background-color:#ccc;
    border-bottom:solid 1px #000;
}

Fid: http://jsfiddle.net/YdEW9/26/

This is pure css. Everything is floated left then gave inline-css to float:right on the div with (4) 2's

I kinda don't know how to set the inline-css without javascript. Server side maybe? but I doubt you can get the height of the elements.

Well anyway hope this helps.