CSS - floating LIs - bigger content messes up the next row.

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>

The first li contains more content than the rest.

So, I have the following problem:

But how do I move the next row down, so it looks like that:

I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.

Any ideas on how to do this?

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

Answer 1

First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.

Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.

Answer 2

You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.

Answer 3

The best solution is to use a little-known display style called table-cell.

I've had to do this a few times. Here's how you do it:

/* -*- 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>    

How this works:

When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)

The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.

the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.

There is ONE other solution that might work, however I haven't tested it.

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

Its not as ugly, but it should work by making the box model force the alignment as well.