CSS - floating LIs - more content will prevent the next line

Question

<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>

<ul class="clearfix">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

first li contains more content than the rest.

So I have the following problem:

problem http://img830.imageshack.us/img830/240/problemc.png

But how to move the next line down, it looks like this : I want this http://img440.imageshack.us/img440/9750/solutionm.png

I tried using display: inline-block; instead of float: left; for lis , which works, but I would still use float: left; on the built-in unit.

Any ideas on how to do this?

Solution for IE:

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 1

, table-cell.

. :

/* -*- CSS -*- */
ul li .wrapper
{
    display:table-cell;
    width:100px;     /*replace here*/
    min-height:100px;/*  "     "   */
}

ul li
{
    float:left;
    display:inline-block;
}
ul
{
    display:table;
}

...

<!-- HTML -->
<ul>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
    <li><div class="wrapper">my-content</div></li>
</ul>    

:

, UL, , . , // ( !)

- - " ". li, INI . . , li . - , - " ", . , .

REASON li, -, , . , , , - .

, , .

/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }

, , .

Answer 2

: , ? , .

-. , ? , , . , clear:both; li ( , ) . li s.

Answer 3

, float:left; , , . , , float .