Problem with floating divs in IE8

Question

I want to make two block stand side by side. In Opera, Chrome and Firefox I get the expected result with the code I use. But IE8 refuses to display it correctly. Here's IE8 screenshot: http://ipicture.ru/upload/100405/RCFnQI7yZo.png And Chrome screenshot (how it should look like): http://ipicture.ru/upload/100405/4x95HC33zK.png

Here's my HTML:

<div id="balance-container">
    <div id="balance-info-container">
        <p class="big" style="margin-bottom: 5px;">
            <strong>
                <span style="color: #56666F;">Баланс:</span>
                <span style="color: #E12122;">-2312 руб</span>
            </strong>
        </p>
        <p class="small minor"><strong>Овердрафт 1000 руб. до 1.05.10</strong></p>
    </div>
    <div id="balance-button-container">
        <button id="pay-button" class="green-button">Пополнить счет</button>
    </div>
</div>

And CSS:

#balance-container {
    margin-left: auto;
    margin-right: auto;
    width: 390px;
}
#balance-info-container, #balance-button-container {
    float: left;
}
#balance-info-container {
    width: 250px;
}

Answer 1

It's most likely something to do with the widths. #balance-info-container doesn't seem to fit on the right, so it slips down.
To test that this is the problem, give #balance-container width:450px; and refresh.

If this is indeed the problem, you can use IE's developer tools to analyse the width of each of the child containers, and shrink them or enlarge the parent enough that they'll fit.

Answer 2

#balance-container {
    margin: 0 auto 0 auto;
    width: 390px;
}
#balance-info-container {
    width: 250px;
    float:left;
}
#balance-button-container,#pay-button{
    width:140px;
    float:left;
}

That should give your intended side-by-side containers.