IE7 float bug workaround?

I have the following HTML:

<div><span>left</span><span style="float:right;">right</span></div>

For some reason, the float:right, floats to the right, but goes down 1 line too. Why is this happening and is there开发者_StackOverflow中文版 a work around?

Here is a jsfiddle to show it in action: http://jsfiddle.net/CxaW6/

But it will only show the bug if you are looking at the link via IE7.

Have the other span float left will fix this.

<div><span style="float:left;">left</span><span style="float:right;">right</span></div>

Usually span is treated as an inline element. IE7 seems to handle them differently and so extending the width (within the layout process) of the first span to 100%. In this case there is not enough space for the other span in this line, so it will be wrapped to the next line.

You can either float the span left explicitly with float: left (my preferred solution) or put the right-floated span first in the markup. The issue is to do with IE7 giving a virtual full width to the first span, causing the second span to render on the 'next' line.

Float the first span to the left, or float the first span to the right and remove the float property from the second.