Плавающий div расширяется до 100% в IE7

У меня есть следующие простые макеты:

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;
}


    

        
123
        
456
    
    
999

в Chrome и Firefox, это оказывается, как и ожидалось - все контент находится в пределах той же строки:

Однако при тестировании этого в IE7 (или фактически IE8 в режиме совместимости, чтобы быть точным), первый Div под главным принимает ширину 100%, и поэтому второй нажата под ним:

Пример можно найти здесь .

Как это может быть исправлено?

( Редактирование: Оказывается, что это происходит в IE9 в режиме совместимости, а также в режиме совместимости)

( Редактировать 2: Похоже, что это происходит с поплавкам : только правильно и не С поплавок: слева )