Div positioning problem related to Relative and Absolute positioning

Question

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!

Answer 1

Use position: fixed; for the footer, you also might want to have some padding-bottom for your body so that the content won't go under it.

Answer 2

Take out the height: 100% on pageContainer - that fixes the div to the window height and not the content height.

Answer 3

try this 'sticky footer'

link

Answer 4

Try this:

<style type="text/css">
 html, body { margin:0; padding:0; height:100%; }       
 #page_container { width:743px; margin:0 auto; }
 #header { height:87px; border:1px solid #000; }
 #footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;}
 #nav { height:29px; border:1px solid #000;}
 #left_column { width:230px; float:left; border:1px solid #000;}
 #right_column { width:490px; float:left; border:1px solid #000;}

 #page { min-height:100%; position:relative; }
 #main_content { padding-bottom:133px; }
 .clear { clear:both; }
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
    height:100%;
}
</style>
<![endif]--> 

HTML (note - you must put #footer inside #page for this method to work):

<div id="page">
    <div id="page_container">
        <div id="header">hhhh</div>
        <div id="nav">nav</div>
        <div id="main_content">
            <div id="left_column">lll</div>
            <div id="right_column">rrr</div>
            <div class="clear"></div>
        </div>
    </div>
    <div id="footer">
        <div id="footer_container">fffff</div>
    </div>      
</div>

You can preview working example here: http://www.front-end-developer.net/examples/bottomfooter/footer.htm

Tested on Chrome, Firefox, IE6, IE7, IE8 and Opera.