I'm creating a site that has two columns with content of variable height stacking into both columns. The client really wants it to look like the Facebook Timeline, where the content flows nicely in both columns, but when I float the divs left, or split the between left and right, the divs will only line up next to each other. They will not pass the bottom edge of the floated block on the opposite side.

It basically creates different rows of content, but I'd like to have a flowing timeline-style where the content on the left floats up to the bottom of the previous left floated content and the same for the right. The css right now is this:

From research, there is no way to do this without javascript or soething possibly in CSS3 that the person didn't specify. Any help would be greatly appreciated.

.align-left, .align-right {
width: 47%;
.align-left {
float: left;
clear: left;
.align-right {
float: right;
clear: right;

2 answers


Thank you! One thing I forgot from the css is that both .align-right and .align-left are set to display: inline-block; (which means this won't entirely work in ie).

Thanks again for your solution!

Answered almost 8 years ago by Marc Muszynski
  • No problem. If it solves your problem, be sure to mark it as the correct answer. Also, you can check out a work-around for getting IE 7 to display something inline-block at http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ though I would put that in a conditional comment as it is a CSS hack. Ktash almost 8 years ago
Ktash 1851

In Firebug, at least, I was able to do this by simply removing the float and clear on the .align_right class and adding a right margin to the .align_left class. Not sure if it works cross-browser, and you do run into the issue of the columns becoming unbalanced. The easiest way to fix the unbalanced issue may be to write some JavaScript to compensate, or figure out how to plan for it on the server-side of things. With JavaScript, you can just loop through the elements, and add up the height on either side. If it starts to get unbalanced, move one over to the other side by switch the class from .align_left to .align_right or visa-verse.

Answered almost 8 years ago by Ktash