Question

Please see this jsFiddle: http://jsfiddle.net/jRGyS/

I want to create two columns from the blocks, with the even (lime) blocks floating right and the odd (blue) blocks floating left. However, the layout can get a bit messy when the blocks vary in height, as you can see the last blue block is floating up against another blue block, but this blue block should either stay left, or instead float right.

The problem is that these blocks will be loaded in dynamically, and always vary in height. So you can never predict how many there will be, what height each one will be, and the order in which they appear (except for maybe with Javascript after the DOM has loaded).

An idea case would be without Javascript, but if that’s not possible, JS can be used.

Answer 1

Use clear:left and clear:right as in this JSFiddle

div.block {
   background: blue;
   width: 100px;
   height: 100px;
   margin-bottom: 10px; 
}
div.block:nth-child(odd) {
   float: left;            
   clear: left;
}
div.block:nth-child(even) {
   background: lime;   
   float: right;            
   clear: right;
}