Верстка повторяющихся блоков

Довольно часто при верстке сайта возникает необходимость размещать блоки одинаковой ширины, но разной высоты в контейнере с переменной шириной (читай резиновом). Плюс на этот список может применяться фильтр, который 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.dis.dj/blocks/.

P. S. Решение не ново, но оно будет полезно в любом случае.

P. P. S. На скриншоте — будущий интернет-магазин-портал для мамочек.