6

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. enter image description here

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.

steveo225
  • 11,394
  • 16
  • 62
  • 114
  • I could be wrong which is why this is being posted as a comment rather than an answer. But don't you typically only apply "float" to block level elements? Span is not a block, but an in-line element and perhaps that's why IE is not playing nice with it. – Sparky May 25 '11 at 17:52
  • Same thing happens with a `
    ` tag. I thought perhaps a `` may not wrap like that because it is not a block level element.
     – steveo225 May 25 '11 at 17:53
  • Which version of IE are you testing with? Which versions of IE do you care about? Could you add the complete HTML you're using for that "H2 Test" image? – thirtydot May 25 '11 at 17:55
  • I'm reading more about this now and the consensus I'm finding so far is that you can't apply "float" to non-block level elements. – Sparky May 25 '11 at 17:56
  • @Sparky672: That's simply not true. [`float` forces `display: block`](http://stackoverflow.com/questions/5854463/jquery-in-chrome-returns-block-instead-of-inline/5854523#5854523). – thirtydot May 25 '11 at 17:57
  • @thirtydot: I am happy with IE8+. The entire code is posted (I wasn't worried about adhearing to the standards for a simple example). – steveo225 May 25 '11 at 17:58
  • @Sparky672: You are getting too hung up on `float:left`, that was just a simple demo. It even says in the question: "I am not locked into using `float:left`" – steveo225 May 25 '11 at 17:59
  • @steveo225: So you're telling me that your three line snippet of code is your **ENTIRE** file? If that's the case, I know the answer here. – thirtydot May 25 '11 at 17:59
  • @thirtydot: Reading lots of variation in opinion on this. Thanks for the clarification. – Sparky May 25 '11 at 17:59
  • @steveo225: I'm not hung up on anything. I was just trying to ascertain whether "float" is valid on inline elements or not. – Sparky May 25 '11 at 18:02
  • @thirtydot: This is not where the final solution is going, but I made the image from only the code specified. If I can get IE to behave nicely with this small example, I can roll it in without problems. – steveo225 May 25 '11 at 18:03
  • This works, but i'm not sure it's quite the behavior you want. Lemme know and i'll try and change it if it's not: http://jsfiddle.net/DctfL/12/ – Thomas Shields May 25 '11 at 17:54

1 Answers1

5

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/

kei
  • 20,157
  • 2
  • 35
  • 62