Question

I have the following HTML/CSS, which simply has a <span> tag styled with float:right inside an <h2> tag:

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

Everything works well on Firefox (and I suspect other good browsers, like Chrome, Opera, etc.), but in IE, the <span> gets forced to the next line.

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

How can I get IE to duplicate the behavior of Firefox?

Additional info: I am not locked into using float:right, all I really want is a portion of the text left aligned, and a portion of the text right aligned within the <h2>. I have tried numerous things, but IE always seems to be the 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/