div background color cuts off

Question

Here is a screen shot of the what it looks like in IE6, works fine in everything else: http://i39.tinypic.com/2lcr4uw.png

It is within div class="article odd", which has overflow:auto; set.

Then it has a ul list (w/ clear:both; set), float to the left, w/ the li's split by 50%

Any suggestions would be appreciated.

Answer 1

<div class="article odd">
  <ul>
  </ul>
  <div class="clear"></div>
</div>

css
---
.clear
{
   clear: both;
}

Answer 2

Yup, this is a bug with using overflow:auto to contain floats. If you add a width/height you'll fix that up. For instance, width: 100%.

Here's a great page for information about this. http://www.quirksmode.org/css/clearing.html

Definately, don't use a "clearing div". It adds unwanted markup and also has quirks with browser printing.

Edit: If that doesn't help, I think you'll need to give us some example code instead of a picture.

Answer 3

I agree with Hexxagonal, don't insert extra clearing div's. Better fixing it with CSS only.

I prefer giving IE6 height: 1%; or zoom: 1; which will trigger IE's hasLayout. This does the same for floats in IE as overflow: hidden; or overflow: auto; does for Firefox, Opera, Safari etc.