Question

I have 6 li elements that are floated to appear to be in a 2×3 grid:

1 2 3
4 5 6

Looks fine in everything except IE 6/7, there it looks like:

1 2 3
4   5
  6

The CSS I have is:

ul {
    margin: 0;
    padding: 0;
    width: 900px;
    overflow: hidden;
}

li {
    list-style: none;
    width: 278px;
    float: left;
    margin-left: 12px;
    line-height: 1.6em;
    padding-bottom: 20px;
}

Items 1 and 4 have these styles on them:

li.row_start {
    margin-left: 0;
    clear: both;
}

The problem (I’m guessing) is that the content in the li containers can have a variable height depending on the content inside. So in the example, item 2 would have a larger height than 1 and 3 so when item 5 is trying to float left, it is hitting the height/padding of item 2.

Answer 1

Your guess is right on. The only real way to ensure that you get a layout like you want is to set the height on your items as well.