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/