Floated elements of variable height push siblings down

Question

I have 6 elements which should result in two rows of 3 elements each, so I\'ve floated them. But the content of the elements varies quite a bit, and the layout breaks when

Answer 1

How about a CSS only solution? Add this rule:

figure:nth-of-type(3n+1) {
    clear:left;
}

jsFiddle example