Stacking divs with variable height in 2 columns like Facebook Timeline

Question

I want to create a natural flow of content. The problem that I now face is that the

s will only line up next to each other. They will not pass the bo

Answer 1

After checking the Facebook CSS and HTML, I found they achieve this using a list and alternating the float on the li elements between left and right (ie, every even element is floated right)

For example:

HTML

    
...
    
...
    
...

CSS

li {
    clear: left;
    float: left;
    display: block;
    height: 100px;
    width: 200px;
    margin-bottom: 10px;
}

li:nth-child(2n) {
    clear: right;
    float: right;
}

Working example: http://jsfiddle.net/gBVPj/

This approach only works if an element on one side does not exceed the height of two elements on the other side. For example, in your diagram, should box 2 have a height larger than that of box 1 and 3 combined, then box 5 will be displaced and positioned inline with box 4.

Like this: http://jsfiddle.net/gBVPj/1/

I have not found an example of this problem on Facebook (one element never exceeds the height of two) so I believe that they have taken this into account. They could possibly be achieving this by using JavaScript - if you check the elements, they have a property data-height which matches the height of the element.