Довольно часто при верстке сайта возникает необходимость размещать блоки одинаковой ширины, но разной высоты в контейнере с переменной шириной (читай резиновом). Плюс на этот список может применяться фильтр, который JS-ом скрывает или показывает элементы списка, при этом он не должен разрушать «строки», верстку, или образовывать дыры, поэтому решения на таблицах не катят сразу. Простейший пример — каталог товаров: 
Решили вместе с morfi сделать более-менее универсальное решение, которое бы позволило без лишних проблем публиковать такого рода контент. Важный момент — что высота блоков может зависить, к примеру, от высоты заголовка, или от описания, если бы оно было в макете.
Тут есть два подводных камня. Первый — зазоры между блоками. Если просто поставить float:left; margin-right|bottom:50px (я упростил синтаксис), то у последнего элемента в «строке» всегда будет отступ, поэтому он никогда не будет четко на границе контейнера.
Решение с float, лежащее на поверхности:
1. Элементам задаем float:left; margin-top|left:50px
2. Заворачиваем элементы в ещё один контейнер и ему задаем margin-top|left:-50px — отрицательный отступ, и пусть теперь внешний контейнер (изначальный) будет называться wrapper, а внутренний — container.
3. Контейнеру и врапперу для дружбы с IE нужно присвоить zoom:1 и чтоб они не схлопнулись от float-элементов — overflow:hidden
4. Чисто для IE нужно указать display:inline для блоков, иначе мы получим удвоенный margin
Все бы ничего, но в такой ситуации, если высота блоков может сильно отличаться, может возникнуть вот такой косяк:
Обратите внимание на блоки three, four и five. Зеленый блок — это враппер, синий — контейнер.
Логически ситуация понятна — блок должен тянуть линию (или «строку»), в которой он находится. Это поведение — типичное для display:inline-block.
Для того, чтобы применить это решение на практике нужно:
1. Снова задаем margin как и в примере выше
2. Блокам раздаем универсальную кроссбраузерную конструкцию display:-moz-inline-box; display:inline-block; *zoom:1; *display:inline
3. Замечаем, что горизонтальные расстояния оказались чуть больше нужных 50px — это из-за пробелов, затесавшихся между inline-block
4. Для борьбы с пробелами измеряем его ширину — получается 4px, а это 25% от 1em, который по-умолчанию равен 16px. Таким образом контейнеру ставим word-spacing:-0.25em, а блокам word-spacing:normal
5. Для IE нужно также прописать блокам text-align:top, иначе элементы будут выровнены по базовой линии.
Багов пока не замечено, решение кроссбраузерное. Inline-метод спокойно выдерживает простановку text-align:center у контейнера (см. скриншот). Надо только не забыть у блоков выставить обратно text-align:left (см style.css — я их закоментировал там).
Работающий пример доступен по адресу: http://test.nimax.ru/blocks/.
P. S. Решение не ново, но оно будет полезно в любом случае.
P. P. S. На скриншоте — будущий интернет-магазин-портал для мамочек, который сейчас создается в студии Nimax.
