How do I fix IE7 right float bug without changing order of content

Question

I have list items, with a span, set to inline-block and floated right. This is the result

Here's a link to jsFiddle: http://jsfiddle.net/8bR3u/.
I've seen several suggestions to fix this by putting the span in front of the rest of the list item content, but I want a solution that doesn't jack up the markup. Anyone know of one?

Answer 1

The fix required can be found at http://jsfiddle.net/8bR3u/4/

The fix is to add position:relative to the ul and add position:absolute and top:5px and right:0px to the span and remove the float.

The solution is to use Relatively Absolute positioning. More info on it can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/