Div positioning problem related to Relative and Absolute positioning
- by abszero
Hello everyone.
The problem I am running into is related to a footer I have absolutely positioned at the bottom of the page. Everything is fine until the copy on the page begins to extend further down the page which then causes my content wells to extend down, behind, the footer. Is there anyway I can force my content wells to 'push' the footer down the page?
Here is the relevant html:
<div id="page">
<div id="page_container">
<div id="header"></div>
<div id="nav"></div>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_container">
</div>
</div>
And the relevant CSS
#page {width:100%;margin:0 0 10px 0; text-align:center;}
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;}
#header {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;}
#nav {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;}
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;}
#footer {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;}
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;}
#left_column {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;}
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;}
Thanks for any help you might be able to give!
