Weird ie float right problem

This of course looks good in every browser except ie for windows. Im trying to do something like this:

123    A Great Chardoney                      $3.50
232    Another good wine to drink             $5.50

<li>
     <div>
    <span style="padding-right:10px;">Wine Number</span>
    Wine Name
    <span style="float:right;">Wine Price</span>
    </div>
</li>

Ie does float the price to the right, however, shifts it down exactly one line.

You can see the problem here:

http://theiconmadison.com/wines.php

In IE floats must come first .


[COLOR=#000080]<li>[/COLOR]
     [COLOR=#000080]<div>[/COLOR]
[B][COLOR=#000080]<span style=[COLOR=#0000ff]"float:right;"[/COLOR]>[/COLOR]Wine Price[COLOR=#000080]</span>[/COLOR][/B]
    
[COLOR=#000080]<span style=[COLOR=#0000ff]"padding-right:10px;"[/COLOR]>[/COLOR]Wine Number[COLOR=#000080]</span>[/COLOR]
    Wine Name
    
    [COLOR=#000080]</div>[/COLOR]
[COLOR=#000080]</li>[/COLOR]

Floats must come before block elements in all browsers when you want the following content to wrap.

When floats are on the same line as inline content then the float should position itself correctly but only very modern browsers understand this. IE6/7 ff3 do not understand this and put the float on a new line.

Therefore it is always best to move the float to the front of content that you want to wrap.

If you wanted to maintain source order then float the left elements first and let the right element be text-align:right and static.

e.g.

http://www.pmob.co.uk/temp/leftandright.htm