CODEWITHSUNDEEP
htmlcssinternet-explorer-6cross-browser
fredley
fredley

Reputation: 33891

IE6 floating divs don't clear properly

I'm trying to make a 2-column 'table' using floated elements:

<ul>
  <li class="odd">This will appear on the left</li>
  <li class="even">This will appear on the right</li>
  <li class="odd">This will appear on the left (2)</li>
  <li class="even">This will appear on the right (2)</li>
  <li class="odd">This will appear on the left (3)</li>
  <li class="even">This will appear on the right (3)</li>
</ul>

CSS:

ul { 
    margin: 20px 0px; 
    width: 880px;
}

li {
    position: relative;
    float: left;
    width: 410px;
    margin: 0px 0px 10px 0px;
    padding: 0;
}

.odd { clear: left; }

.even {
    clear: right;
    margin-left: 50px;
}

Here's a JSFiddle

This works great, but in IE6, the even elements don't clear, and end up stacked horizontally on the first row. How can I fix this?

Upvotes: 4

Views: 270

Answers (2)

fredley
fredley

Reputation: 33891

Here's what I did. It's a slight adaptation of errkk's answer, so I'll mark his as accepted. 

li { width: 48%; }

.odd { clear: both; }

.even { margin-left: 4%; }

Upvotes: 0

errkk
errkk

Reputation: 305

What about if you make the elements 50% width of the container, and float them all to the left, then each will float next to the last, until there are 2, then the next will appear on the next row.

ul { 
    width: 880px;
    overflow:hidden; /* to clear */
}

li {
    float: left;
    width: 50%;
}

Upvotes: 2

Related Questions