Float:right divs appear on next line in IE only

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...

<div style="background-color:red;">
    Text
    <div style="background-color:yellow; float:right;">Right</div>
</div>

I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the flo开发者_如何学Cating div at the beginning of its parent like this...

<div style="background-color:red;">
    <div style="background-color:yellow; float:right;">Right</div>
    Text
</div>

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?

A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:

<div style="background-color:red; position:relative;">
    Text
    <div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>

I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.

Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.

I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem

<div style="background-color:red;">
    <div style="float: left;">Text</div>
    <div style="background-color:yellow; float:right;">Right</div>
</div>

I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.