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

PURE CSS SOLUTION:

Add the following to your css file:

ol.context li:nth-child(even) {
float: right;
}

DO NOT change your html or anything else.

Result in FF:

--

How it Works

Instead of floating all your elements "left" and creating gaps, we float each container according to the side/column the element they reside in.