Problem with floating divs in IE8

Question

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

Here is 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

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

This should give your intended containers side by side.

Answer 2

, . #balance-info-container, , , .
, , #balance-container width:450px; .

, IE, , .