Floating span: Cross-browser display issue

I have the following code on my site (simplified):

<div align="left">Text on the left
<span style="float:right;">Text on the right</span>
</div>

Code (markup):

In Firefox and Chrome, the two pieces of text appear on the same line, but aligned to opposite ends. This is good. In IE however, while still aligned at opposite ends, they appear on separate lines (the second piece of text on the line below).

Can anyone help it display properly in Explorer, as it does in the other browsers? I'm sure I could use tables instead, but the rest of the design has avoided them for layout so far.

Many thanks.

 

Why not do this?

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

Code (markup):

 

That seems to create new problems of its own.

The DIV actually has a background style, which better illustrates what's going on if anyone wants to recreate the problem:

<div align="left" style="background-color: #E4E7EA;">Text on the left
<span style="float:right;">Text on the right</span>
</div>

Code (Original):

<div style="background-color: #E4E7EA;">
<span style="float:left;">Text on the left</span>
<span style="float:right;">Text on the right</span>
</div>

Code (harrierdh's suggestion):

In all three browsers, using the two-SPAN approach results in the DIV's background color disappearing.