Question

I like the layout that Facebook Timeline has with the staggered two column posts. I have tried to create the same layout with just standard divs and floats. The floats work well when floating to one side, but not to the other. Considering there are blocks of multiple heights, how do you suggest I best tackle this layout? It would be used for a blog, and I am aware that someone has created a WordPress template on this, but is it possible to distil the layout into its simplest form? After using Chrome’s Developer window on my Timeline and the WordPress template, I am struggling to find the appropriate CSS code and need help.

I’ll put what I have as a jsFiddle. I’ve added extra blocks if you need them to make sure.

Answer 1

you have to have the containers on the left be floated and cleared left and the ones on the right be floated and cleared right. You can do this either with javascript or whatever your server side language you use. something quick in jquery would be like this.

(a completed fiddle.. http://jsfiddle.net/gK2Vn/ I was going for the bare bones of the question..)

.item {
  float: left;
  clear: left;
}
.item.right {
  float: right;
  clear: right;
}

var left_column_height = 0;
var right_column_height = 0;
var items = $('.item');
for (var i = 0; i < items.length; i++) {
    items.eq(i).height(Math.floor(Math.random() * 100) + 10);
    if (left_column_height > right_column_height) {
        right_column_height+= items.eq(i).addClass('right').outerHeight(true);
    } else {
        left_column_height+= items.eq(i).outerHeight(true);

    }
}