Geek asks and answers

Custom float alignment in IE7

I have a list of 5 items that move to the left and appear in a row. on the 4th element, I set a clear left side, thereby calling the 4th element on a new line.

But in IE7, the fifth element floats next to the third element in the first line instead of floating next to the fourth element of a new line. Any ideas how to make this work for IE7?

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

+3
source share
1 answer

I have come across this many times, and unfortunately, the only solution I know of is a separate cleanup element to clear the float.

This is 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;
}

  , div 1 , (yay!).

IE7, guff javascript < IE8.

+1

More articles:


All Articles