Floating div expands to 100% in IE7

I have the following simple layout:

div.main
{
    width: 300px;
    border: 2p开发者_如何学运维x solid #98999E;
    overflow: auto;
}
div.main > div
{
    float: right;
    border: 2px solid #FF3700; 
    margin: 2px;
}
div.inner > div
{
     float: right;
}

<div class="main">
    <div class="inner">
        <div>123</div>
        <div>456</div>
    </div>
    <div>999</div>
</div>

In Chrome and Firefox, this is rendered as expected - all the content is within the same line:

However, when testing this in IE7 (or actually IE8 in compatibility mode, to be exact), the first div under the main one takes a width of 100%, and therefore the second is pushed beneath it:

An example can be found here.

How can that be fixed?

(Edit: It turns out that this is happening in IE9 in compatibility mode as well)

(Edit 2: It seems that this is happening with float:right only, and doesn't with float:left)

Apply display: inline; or display: inline-block; to the inner div.

w3.org - 9.2.2 Inline-level elements and inline boxes

IE might need a width...technically you're supposed to have a width assigned when you are floating an element.

Try adding a div with a style of clear:

div.main{
    width: 300px;
    border: 2px solid #98999E;
    overflow: auto;
}
div.main > div {
    float: right;
    border: 2px solid #FF3700; 
    margin: 2px;
}
div.inner > div {
    float: right;
}
div.clear{
    clear:both;
}

<div class="main">
    <div class="inner">
        <div>123</div>
        <div>456</div>
    </div>
    <div>999</div>
    <div class='clear'>
</div>

This MUST be done with a div (or some other block level element). It's always good CSS form to clear your floats at the same level at the same level as you create them, after all the floated elements. Let me know if it works for you. Cheers.

I'd suggest that you specify width for floated <div>. That way, you will be more sure about the layout; rather than relying the rendering completely on the browser. Also, it'd hopefully help you visualize what layout you're trying to get at.

Just from the example above, maybe using floating <span> inside a <p> will accomplish what you need? Or, just right-align a paragraph.