floated div drops when height of above DIV is greater than X

Question

hi

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>

If the content in any given "listingItem" DIV becomes too great, the div directly below will drop to the NEXT row.

the content looks like:

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

but if a div has say 1 extra paragraph in, rather than stagger the divs, it is pushed to the next row:

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

this isProbably working as intended, but how can i fix this? can't provide a live page sorry.

any ideas?

thanks

Answer 1

Things like this make me itch:

width:44.999%

Is there any particular reason you can't just use a (gasp!) table? I'm only curious because, of most designs out there, yours seems like it would actually benefit from a table layout.

Answer 2

if you add a div with clear both, or a row container div to each row it would work, however, like dclowd9901 says, tabular content should be in a table, thats what its for!