Проблема с плавающими div в IE8 - PullRequest
Новая
       13

Проблема с плавающими div в IE8

3 голосов
/ 05 апреля 2010

Я хочу, чтобы два блока стояли рядом. В Opera, Chrome и Firefox я получаю ожидаемый результат с помощью кода, который я использую. Но IE8 отказывается отображать его правильно. Вот скриншот IE8: http://ipicture.ru/upload/100405/RCFnQI7yZo.png И скриншот Chrome (как он должен выглядеть): http://ipicture.ru/upload/100405/4x95HC33zK.png

Вот мой 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>

И CSS: 

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

Ответы [ 2 ]

2 голосов
/ 05 апреля 2010 
#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;
}

Это должно дать ваши предполагаемые бок о бок контейнеры.

1 голос
/ 05 апреля 2010

Скорее всего, это связано с шириной. #balance-info-container, кажется, не подходит справа, поэтому он скользит вниз.
Чтобы проверить, что это проблема, введите #balance-container width:450px; и обновите.

Если это действительно проблема, вы можете использовать инструменты разработчика IE для анализа ширины каждого из дочерних контейнеров и уменьшить их или увеличить родительский элемент настолько, чтобы они подходили.

...