IE Compatibility: <span> inside <h2>

Question

I have the following HTML / CSS that simply has a <span> , in the style of float:right inside the <h2> :

 <style>h2{background-color:#e2e2e2;} span{float:right;border:1px solid red;}</style> <h2>H2 Test <span>SPAN text</span></h2> 

Everything works fine in Firefox (and I suspect other good browsers like Chrome, Opera, etc.), but in IE <span> forcibly moves to the next line.

Note: The image shows an example of Firefox and IE.

How can I make IE duplicate Firefox behavior?

Additional info: I am not blocked when using float:right , all I really need is a piece of text aligned to the left and a piece of text aligned within <h2> . I tried a lot of things, but IE always seems like a browser that just won't work. Any help would be appreciated.

Answer 1

HTML:

 <h2><span class="_1">H2 Test</span><span class="_2">SPAN text</span></h2> 

CSS

 h2{background-color:#e2e2e2;overflow:hidden} span._1{float:left} span._2{float:right;border:1px solid red;} 

jsfiddle demo: http://jsfiddle.net/shmZR/