Floating div expands to 100% in IE7

Question

I have the following simple layout:

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

Answer 1

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

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

Answer 2

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