float every other item in a definition list

Question

Greetings all.

I have a definition list like so:

<dl>
 <dd>This is an item on a new line</dd>
 <dd class="float_even">This item should sit on a new line</dd>
 <dd class="float_odd">This item should float next to the previous item</dd>
 <dd class="float_even">This item should sit on a new line</dd>
 <dd class="float_odd">This item should float next to the previous item</dd>        
 <dd>This is an item on a new line</dd>
</dl>

The following css works in Firefox:

dd { clear:both; }
dd.float_even { float:left; }
dd.float_odd { float:left; clear:none; }

...but fails in IE(6/7/8). The ".float_odd" items both occupy the same line as the first ".float_even" item.

I'm trying to get the ".float_even" and ".float_odd" items to occupy the same line, and all other items to occupy their own lines. The items have variable and unknown width.

Any suggestions?

Answer 1

Technically you should use dd { clear:left; } using clear:both should place the dd on a line of its own.

I think the best way to do what you want to do here is:

dl { width: 400px; }
dd { width: 200px; float: left; overflow: hidden; }

Answer 2

Removing the float on dd.float_odd did the trick. Cheers!