title: IE Compatibility issue: <span> inside <h2>
body: <p>I have the following HTML/CSS, which simply has a <code>&lt;span&gt;</code> tag styled with <code>float:right</code> inside an <code>&lt;h2&gt;</code> tag:</p>
  
  <pre><code>&lt;style&gt;h2{background-color:#e2e2e2;}
  span{float:right;border:1px solid red;}&lt;/style&gt;
  &lt;h2&gt;H2 Test &lt;span&gt;SPAN text&lt;/span&gt;&lt;/h2&gt;
  </code></pre>
  
  <p>Everything works well on Firefox (and I suspect other good browsers, like Chrome, Opera, etc.), but in IE, the <code>&lt;span&gt;</code> gets forced to the next line.</p>
  
  <p>Note: the image shows an example of Firefox and IE. <img src="https://i.stack.imgur.com/T799e.png" alt="enter image description here"></p>
  
  <p>How can I get IE to duplicate the behavior of Firefox?</p>
  
  <p>Additional info: I am not locked into using <code>float:right</code>, all I really want is a portion of the text left aligned, and a portion of the text right aligned within the <code>&lt;h2&gt;</code>. I have tried numerous things, but IE always seems to be the browser that just won't work. Any help would be appreciated.</p>