Верстальщики хелп

Вообщем простая задача. Список. Если первый параграф длиннее второго, то третий встает под вторым, а не под первым. Как лечить?

код: http://pastebin.com/4Hu2MTfu

скрин:

Код:

ul.catalog li {    margin-right: 20px;    margin-bottom: 20px;    width: 150px;    display: inline-block;    vertical-align: top;    display: -moz-inline-stack;    zoom: 1;    *display: inline; }

ослостили для 6-го и некоторых ранних версий 7-го

Код:

zoom: 1; *display: inline;

нужно вынести в отдельный ЦСС что б проходил валидацию
ФФ < 2.0 спесифик (display: -moz-inline-stack;) лучше всего в отдельный ЦСС вынести... хотя, на ФФ < 2 можно и забить, их вообще не существует )

во срань. страшная. mr. snatch: спасибо. Пока ждал, сам накидал варианты:

1. вариант
<ul>
<li></li>
<li></li>
<div style="clear:both"></div>
<li></li>
<li></li>
</ul>
(не работает в ослах)

2. вариант
<ul>
<div style="overflow: hidden; zoom: 1;">
<li></li>
<li></li>
</div>
<div style="overflow: hidden; zoom: 1;">
<li></li>
<li></li>
</div>
</ul>
(везде работает)

3. поставить лимит на кол-во отображения символов, на стороне движка

4. mim-height: 100px; max-height: 100px; overflow: auto;
(даем дышать и если контента больше, будет скролл)

5. таблицей

а, ну если можно менять исходный html , то тогда да, имхо лучше присвоить классы элементам <li>, которые являются началом новой строки, типа так

Код:

<style> .new-row {clear: left;} <style> ..... <li>1.1</li> <li>1.2</li> <li class="new-row">2.1</li> <li>2.2</li> <li class="new-row">3.1</li> <li>3.2</li>

или вообще float: none, в зависимости от того, как нужно чо б шаблон выглядел