UL + CSS для раскладки сетки

У меня есть сгенерированный сервером html, например:

<ul>
    <li><!-- few nested elements that form a block --></li>
    <li><!-- few nested elements that form anaother block --></li>
    <li><!-- etc, X times --></li>
</ul>

Все блоки имеют ширину 200 пикселей и неизвестную высоту. Я хочу, чтобы <li> располагался в виде таблицы, подобной этому:

Теперь у меня есть css:

li {
    display: block;
    width: 200px;
    float: left;
    margin: 10px;
}

Все отлично, за исключением того, что столбцы не получают равную высоту. И в примере выше блок №4 "вырвать" на # 1, и результат не в том, чего я пытаюсь достичь:

Есть ли способ кросс-браузера с чистым CSS, который позволит мне использовать макет сетки и не будет применять изменения разметки?

Ответы

li:nth-child(3n+0) { clear: left; }