Content scrolling past page footer

Question

Hello,

In my page layout, the footer is staying wher it is and the content is scrolling past the footer. Is there any way to keep the footer positioned at the bottom of the content ?. You can see how the page looks by visiting www.postcode53.com/layout.

The HTML and CSS are as follows:

HTML Housing Partners

  <div id="header-navigation">
   <ul>
    <li><a href="#">About Zach</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>



    </div>

 <div class="menu">
  <div class="menu-navigation">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Demo</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Sign UP!</a></li>
   </ul>
  </div>

 </div>

 <div id="image">
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
  Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
 </div>

 <div class="menu">
  <div class="menu-navigation">
   <ul id="menulist">
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>

   </ul>
  </div>

 <div id="maincontent">

  <img src="data.jpg"></img>

  <div id="extra">
   <div id="newsletters">
    <div id="title"><h2>LazyZach Newsletters</h2></div>
   </div>

   <div id="navigation">
    <div id="title"><h2>Navigation</h2></div> 
    <ul id="extra-navigation">
     <li>Home</li>
     <li>Features</li>
     <li>Demo</li>
     <li>FAQ</li>
     <li>Sign Up</li>
     <li>About Zach</li>
     <li>Contact</li>
    </ul>
   </div>

   <div id="boring-stuff">
    <div id="title"><h2>Boring Stuff</h2></div>
    <ul id="extra-navigation">
     <li>Terms Of Use</li>
     <li>Privacy Policy</li>
     <li>Copyright Policy</li>
     <li>Removal Notice</li>
     <li>Partnet With Us</li>
     <li>Abuse Desk</li>
     <li>Contact Us</li>
     <li>Sitemap</li>
    </ul>
   </div>

   <div id="overheard">
    <div id="title"><h2>Overheard on Twitter</h2></div>
   </div>
  </div>

 </div>
 <div id="footer">
  <center>LAZYZACH IS CREATED BY XYZ GROUP &copy; 2009. ALL RIGHTS RESERVED</center>
 </div>


</body>

CSS

#header {
    margin:0 auto;
    overflow:hidden;
    padding:-5px 0;
    width:100%;
    background:#000000;

}

#banner {
    padding-left:35px;
}

#header-navigation {
    float:right;
    color:#ffffff;
    font-weight:bold;
    margin:0 80px 0 0;
    padding-right:20px;
    width:250px;


}
#header-navigation a {
    color:#C0C0C0;
    text-decoration:none;
}

#header-navigation ul li {
    display: inline;
    padding-right:8px;

} 

.menu {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#CCCCCC;
}



.menu-navigation {
    color:#ffffff;
    font-weight:bold;
    padding-left:0px;
}
.menu-navigation a {
    color:#666666;
    text-decoration:none;
}

.menu-navigation ul li {
    display: inline;
    padding-right:14px;

} 

#menulist li {
    padding-right:250px;
}

#menulist{
    padding-right:34px;
}

#image {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#ABDB2A;
    color:#FFFFFF;
    font-weight:bold;
}

#maincontent {
    background:white;
    position:absolute;

}

#extra {
    position:absolute;
    margin:0 auto;
    padding-right:30px;
    padding:1px;
    width:1335px;
    background:#AADB2C;
    color:#000000;
    font-weight:bold;
    border:1px solid;

}

#newsletters {
    float:left;
    margin-right:250px;




}

#navigation {
    float:left;
    margin-right:70px;


}

#boring-stuff {
    float:left;
    margin-right:70px;
}

#footer {
    background:#ffffff;
    position:fixed;
    bottom:0px;
    margin-top:10px;
    left:0;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color:#666666;

}

#extra-navigation {
    list-style-type:none;
    padding-left:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    margin-top:-15px;
;


}

#extra-navigation li {
     margin-bottom:.5em;
}


#newsletters #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:0px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-left:100px;





}


#navigation #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}




#boring-stuff #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}


#overheard {
    margin-left:600px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

Please Help. Thank You.

Answer 1

If you want the footer to be at the bottom of the content, you will need to seriously refactor the layout. Some of the layout elements are now using

position: absolute;

That's what makes it nearly impossible to pin the footer to the end of the content. It's possible only if you make all your layout elements of fixed height and thus calculate the required position of the footer.

I'd advise you to get rid of absolute positioning and then the footer will be at the end naturally.

Answer 2

MARKUP

I'm done looking at it. Fully fixed markup, lots of </div> were missing so I'm guessing your php or whatever you're using on the backend is screwed up:

<div id="header">
    <img id="banner" src="HousingPartners.jpg">

    <div id="header-navigation">
        <ul>
            <li><a href="#">About Zach</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

<div class="menu">
    <div class="menu-navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Demo</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Sign UP!</a></li>
        </ul>
    </div>
</div>

<div id="image">
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
</div>

<div class="menu">
    <div class="menu-navigation">
        <ul id="menulist">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
    </div>
</div>

<div id="maincontent">
    <img src="data.jpg">
</div>

<div id="extra">
    <div id="newsletters">
        <div id="title"><h2>LazyZach Newsletters</h2></div>
    </div>
    <div id="navigation">
        <div id="title"><h2>Navigation</h2></div>
        <ul id="extra-navigation">
            <li>Home</li>
            <li>Features</li>
            <li>Demo</li>
            <li>FAQ</li>
            <li>Sign Up</li>
            <li>About Zach</li>
            <li>Contact</li>
        </ul>
    </div>
    <div id="boring-stuff">
        <div id="title"><h2>Boring Stuff</h2></div>
        <ul id="extra-navigation">
            <li>Terms Of Use</li>
            <li>Privacy Policy</li>
            <li>Copyright Policy</li>
            <li>Removal Notice</li>
            <li>Partnet With Us</li>
            <li>Abuse Desk</li>
            <li>Contact Us</li>
            <li>Sitemap</li>
        </ul>
    </div>
    <div id="overheard">
        <div id="title"><h2>Overheard on Twitter</h2></div>
    </div>
    <div class="clear-all" style="clear: both; height: 0px;">&nbsp;</div>
</div>


<div id="footer">
    LAZYZACH IS CREATED BY XYZ GROUP © 2009. ALL RIGHTS RESERVED
</div>

---

NOTICE:

In the above markup, I added an additional line inside of the div called extra:

    <div class="clear-all" style="clear: both; height: 0px;">&nbsp;</div>

This is usually called a clearing div and it makes a box fully wrap around all the elements inside it even if they are all floated left or right.

---

CSS

Lots of mistakes in the CSS too. It looks like it was generated by the aborted child of Dreamweaver and Frontpage. Working CSS:

#header {
    margin:0 auto;
    overflow:hidden;
    padding:-5px 0;
    width:100%;
    background:#000000;

}

#banner {
    padding-left:35px;
}

#header-navigation {
    float:right;
    color:#ffffff;
    font-weight:bold;
    margin:0 80px 0 0;
    padding-right:20px;
    width:250px;
}

#header-navigation a {
    color:#C0C0C0;
    text-decoration:none;
}

#header-navigation ul li {
    display: inline;
    padding-right:8px;

}

.menu {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#CCCCCC;
}



.menu-navigation {
    color:#ffffff;
    font-weight:bold;
    padding-left:0px;
}
.menu-navigation a {
    color:#666666;
    text-decoration:none;
}

.menu-navigation ul li {
    display: inline;
    padding-right:14px;

}

#menulist li {
    padding-right:250px;
}

#menulist{
    padding-right:34px;
}

#image {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#ABDB2A;
    color:#FFFFFF;
    font-weight:bold;
}

#maincontent {
    background:white;
}

#extra {
    margin:0 auto;
    padding-right:30px;
    padding:1px;
    width:1335px;
    background:#AADB2C;
    color:#000000;
    font-weight:bold;
    border:1px solid;

}

#newsletters {
    float:left;
    margin-right:250px;
}

#navigation {
    float:left;
    margin-right:70px;
}

#boring-stuff {
    float:left;
    margin-right:70px;
}

#footer {
    background:#ffffff;
    bottom:0px;
    margin-top:10px;
    left:0;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color:#666666;
    text-align: center;
}

#extra-navigation {
    list-style-type:none;
    padding-left:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    margin-top:-15px;
}

#extra-navigation li {
    margin-bottom:.5em;
}


#newsletters #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:0px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-left:100px;
}


#navigation #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

#boring-stuff #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}


#overheard {
    margin-left:600px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

---

All this stuff should give you something close to what you was trying to make. I hope it will be useful to you.