CSS position absolute doesn't work in IE7 - html

Question

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

Answer 1

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.

Answer 2

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?