IE 6/7 float height issue

I have 6 li elements that are floated to appear to be in a 2x3 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.

Answers


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.


Need Your Help

jQuery Load div on hover and be able to interact with that div

jquery css html

I am trying to create a hover to load in social feeds for Facebook & Twitter.

How can I fetch just a document without his referenced documents

mongodb symfony2 doctrine-odm doctrine-mongodb

I have two Documents: Client and PV. Many PV are referenced in one Client. It's unidirectional.