CSS абсолютная позиция не работает в IE7

Question

У меня есть следующий простой скрипт, но он не работает в IE7

<div id="content">
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom_menus">any text here...</div>
</div>

и CSS

#content
{
    margin: 0 auto;
    padding: 0;
    width: 980px;
    background-color: lime;
    height: 800px;
    overflow: hidden;
    position: relative;
}
#left
{
    width: 275px;
    float: left;
    background-color: olive;
    margin: 0px 0px -5000px 0;
    padding: 0 0 5000px 0;
    min-height: 400px;
}
#right
{
    width: 704px;
    float: left;
    background-color: red;
    margin: 0px 0px -5000px 0;
    padding: 0 0 5000px 0;
    min-height: 400px;
}
#bottom_menus
{
    background-color: orange;
    height: 15px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

почему абсолютная позиция не работает? заранее спасибо

Answer 1

для работы в абсолютном положении, вы должны указать оба направления: например. top & left или bottom & right и т. Д. *

Чтобы нижний колонтитул (bottom_menus) занимал все пространство, которое нужно установить:

#bottom_menus {
    background-color: orange;
    height: 15px;
    position: absolute;
    left: 0;
    right: 0; //assuming you need the footer to take the whole width
    bottom: 0;
    width: 100%;
}

ps: небольшое замечание, вам не нужно устанавливать px, когда значение равно 0.

Answer 2

Вы не указали слева, поэтому по умолчанию 0px; Поскольку у вас есть поле -5000px на поле, я предполагаю, что оно работает, и div bottom_menus находится вне экрана слева Абсолютное позиционирование игнорирует заполнение родительского контейнера. Попробуйте установить left: 5000px, при условии, что вам нужны отрицательное поле и положительный отступ. Что вы пытаетесь сделать с этим?