Div positioning problem related to Relative and Absolute positioning

Posted by abszero on Stack Overflow See other posts from Stack Overflow or by abszero
Published on 2010-03-26T13:58:52Z Indexed on 2010/03/26 14:03 UTC
Read the original article Hit count: 406

Filed under:
|
|

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!

© Stack Overflow or respective owner

Related posts about css

Related posts about div-layouts