плавающий div падает, когда высота над DIV больше X

Question

CSS:

.listingContainer {
    margin:auto;
    overflow:hidden;
    padding:0 0 16px 16px;
    width:660px;
}

.listingItem {
    float:left;
    margin:0 2% 3% 3%;
    min-height:250px;
    width:44.999%;
}

HTML:

<div class="listingContainer">
    <div class="listingItem">
    <p>Some Content</p>
    </div>
    <div class="listingItem">
    <p>Some Content</p>
    </div>
    <div class="listingItem">
    <p>Some Content</p>
    </div>
</div>

Если содержимое какого-либо из DIV «перечисления элементов» становится слишком большим, то нижеприведенный элемент div перейдет в следующую строку.

содержимое выглядит так:

[1] [2]
[3] [4]
[5] [6]

но если у div есть, скажем, 1 дополнительный абзац, вместо того, чтобы разбивать div, он переносится в следующую строку:

[1] [2]
    [4] 
[3] [5] 
[6]

Возможно, это работает как задумано, но как я могу это исправить? не могу предоставить живую страницу извините.

есть идеи?

спасибо

Answer 1

Если вы добавляете div с обоими clear или контейнер строки div к каждой строке, это будет работать, однако, как говорит dclowd9901, табличное содержимое должно быть в таблице, вот для чего оно!

Answer 2

Такие вещи вызывают у меня зуд:

width:44.999%

Есть ли какая-то особая причина, по которой вы не можете просто использовать (задыхаясь!) Стол? Мне только любопытно, потому что из большинства существующих дизайнов ваш, похоже, выиграл бы от макета стола.