Компактное размещение блоков - Вопросы по CSS

Как можно сделать вывод материалов таким образом?
Высота материалов разная, ширина одинаковая.

Примерно так:


float: left;
height: 30%;

Спасибо за участие, но так не получится
Собственно в чём вопрос. При float:left материал 4 по высоте будет начинаться там, где заканчивается самый высокий материал из первых 3-х. И между 1 и 4 будет пустое место. Или вообще порядок слетит. Необходима именно компактность.

Может попробовать средствами php этот вопрос решить? Сначала в диве выводим: 1,4,7...(3n+1) материал, затем: 2,5,8...(3n+2) материал, и в конце: 3,6,9...(3n+3) материал.
А потом:

float: left;
height: 30%;

Посмотрите, может подойдет http://htmlbook.ru/css/column-count (просмотрите всю серию про колумы)