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

Here is a solution I tested: http://jsfiddle.net/5Upbt/7/

I modify your figure style

figure { display: inline-block; vertical-align: top; width: 30%; margin-left: 1%; font-size: small; outline: solid #999 1px; }

This is based on the more general solution here: http://jsfiddle.net/bazmegakapa/Ft9d2/

Answer 2

How about a CSS only solution? Add this rule:

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

jsFiddle example

Answer 3

You can use the :nth-child pseudo class to clear every fourth element.

figure:nth-child(4n){clear: left;}

EDIT:

4n doesn't quite cut it. 3n + 1 is what you want.

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

http://jsfiddle.net/jMCng/1/