Проблема верстки

[webzotchy]

html:
<div id="wrap">
<div class="box">content0</div>
<div class="box">content1</div>
...
<div class="box">contentN</div>
</div>
CSS:
div.box {width:150px;
			   background-color: #faacfc;
			   float:left;
			   margin-right:5px;
			   margin-bottom:5px;}

div#wrap{width:800px;
		  height: 300px; 
		  background-color: green;}

нужно чтобы когда у div#wrap ширины не хватало на все div.box, они перебрасывались вниз.

загвоздка в том что все div.box разной высоты, и поэтому смещаясь вниз они выстраиваются под самым "высоким". то есть появляется неодинаковый отступ.

как сделать так чтобы они сползая вниз сами становились на 5 пикселей от того дива который оказался выше.

идея в том чтобы при уменьшении окна дивы падали вниз, и становились друг под другом.

делать их все одинаковой высоты не очень хочется. помогите.

Баллы на ВиО

[klierik]

читайте про

display: inline-block

или используйте таблицы

[webzotchy]

таблицы -- ваще не в кассу. нужно чтоб дивы при расширении экрана вставали в один ряд (ну это если монитор 22 дюймов )

display: inline-block -- пробовал выходит так что если у меня допустим 5 дивов, разной высоты, и два из них при сжатии экрана упало под другие 3, то они становятся под тот у готорого самая большая высота.

а надобно не так.

[Great Rash]

Ну вы даете...

http://blog.grakhov.com/post/99406348/inline-block