CODEWITHSUNDEEP
htmlcssinternet-explorer-8css-float
HiveHicks
HiveHicks

Reputation: 2334

Problem with floating divs in IE8

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

Upvotes: 3

Views: 9298

Answers (2)

Brant
Brant

Reputation: 6011

#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.

Upvotes: 2

ANeves
ANeves

Reputation: 6365

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.

Upvotes: 1

Related Questions