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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With