title: Float:right divs appear on next line in IE only
body: <p>Ok, so I'm working on a prototype of my UI before I start coding the webapp.  I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues.  One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div.  This is the problem markup in its simplest form...</p>
  
  <pre><code>&lt;div style="background-color:red;"&gt;
      Text
      &lt;div style="background-color:yellow; float:right;"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...</p>
  
  <pre><code>&lt;div style="background-color:red;"&gt;
      &lt;div style="background-color:yellow; float:right;"&gt;Right&lt;/div&gt;
      Text
  &lt;/div&gt;
  </code></pre>
  
  <p>In reality, the nested div has a class and my CSS is floating that class.  But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated?  Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE.  Is there a better way to solve this?</p>