在IE7中,浮动div扩展到100%

Question

我有以下简单的布局:

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>

在Chrome和Firefox中,这会按预期呈现 - 所有内容都在同一行内:

但是,在IE7中测试时(或者在兼容模式下实际上是IE8),主要的第一个div的宽度为100%,因此第二个div被推到它下面:

这里可以找到一个例子.

怎么能修好？

(编辑: 事实证明这也发生在兼容模式的IE9中)

(编辑2:似乎float:right只发生这种情况,而不是float:left)

Answer 1

应用display: inline;或display: inline-block;与内部DIV.

w3.org - 9.2.2内联级元素和内联框