CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 23141

CSS position absolute doesn't work in IE7

i have the following simple script, but it doesn't work in IE7

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

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

why position absolute doesn't work? thanks in advance

Upvotes: 1

Views: 4488

Answers (2)

Mark
Mark

Reputation: 6855

for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...

For you footer (bottom_menus) to take all space you need to set:

#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: small remark, you dont need to set px unit when value is 0.

Upvotes: 2

Tom
Tom

Reputation: 22831

You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?

Upvotes: 1

Related Questions