IE7 float bug workaround?

Question

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 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.

Answer 1

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.

Answer 2

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.

Answer 3

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