selective clearing float items in IE7

Question

I have a list of 5 items which are floated left, and displayed inline. on the 4rd item, I set clear left, thereby causing the 4th item into a new line.

But in IE7 the 5th item floats next to the 3rd item on the first line instead of floating next to the 4th item on the new line. Any ideas how to get this to work for IE7?

Test: http://jsfiddle.net/3dSsP/4/

Answer 1

I've come across this many times and unfortunately the only solution i'm aware of is to have a seperate clearing element to clear the float.

It's ugly but it works:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li class="clear">&nbsp;</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

CSS:

.clear{
  display: block;
  float: none;
  clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

The   and font declarations will ensure the clearing div is only 1 pixel tall, otherwise it will be the height of the current font size (yay!).

As this is only for IE7, I would keep your markup clean and add in this extra guff dynamically with javascript for just < IE8.