View Full Version : Sticky Footer Blues

Jul 1st, 2010, 03:12 AM
I've spent hours and hours trying to figure out how to do this to no avail, and I'm at my wit's end here. What I'm trying to do is your basic css footer to stick to the bottom of the page when there's little content, and to stay at the end of stuff when I've got a lot of content.

Tried everything... The tricks I'm using SHOULD work, but they don't, so I'm convinced it's something in my code that I'm completely unaware of that's negating the effect I want.

I will practically give you one of my kidneys to sell on the black market if you can help me with this.

The page in question is here: http://aquapunk.net/pages/test (You can just view the source from there)
And the stylesheet in question is here: http://laurenbaker.us/ap/v3style.css

Thankyouthankyouthankyou to whoever can help me.

Jul 1st, 2010, 04:35 AM
Your code was a mess. Please, please make sure you validate your code (http://validator.w3.org/) frequently as you develop—use it like a spellchecker. It will really, really help.

The sticky footer requires a very precise set of CSS and HTML "circumstances" to converge in order to work properly. If your code is messy it's very easy for it to cease working. I like to start with the template (http://ryanfait.com/sticky-footer/) and add one CSS attribute at a time, all the time checking to make sure the sticky footer functionality is intact.

In any case, try this:

<!-- cache - - test - /pages/test --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="A dark and dramatic sci-fi webcomic inspired by the traditional tale of the Golem.">
<meta name="keywords" content="mermaid, merfolk, golem, gundam, mecha, robot, stone, maya, aztec, atlantis, coron, eieron, aogaur, nuos, siai, avimo, ganoco, aros, gaurin">

<title>Aquapunk - "Apparition" - page 34</title>

<style type="text/css">

/* body and container */

* {
padding: 0;
margin: 0;
html, body {
width: 100%;
height: 100%;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #b2bab9;
background: #2b2e2a;
/* html>body, html>body #container {
height: auto;
* html #container {
height: 100%;
} */
#container {
min-height: 100%;
height: auto !important;
margin:0 auto -167px;

.cleaner {

/* end of body and container */

/* formatting */

a:link, a:visited { text-decoration: none; color: #476c69; font-weight: bold; font-size: 7pt; }
a:active, a:hover { text-decoration: none; color: #ccc; }
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }

h2, h3 {
font-family:Century gothic;
color: #819088;
text-transform: uppercase;
font-weight: bold;
strong {
font-family:Century gothic;
text-transform: uppercase;
.breathing_room {
margin: 10px 0 10px 0;

.small { font-size:0.8em; }

.float_l { float: left; }
.float_r { float: right; }
/* .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } */

/* end of formatting */

/* header */

#header_wrapper {
width: 100%;
height: 80px;
background: url(http://laurenbaker.us/ap/footer_bg.gif);
background-position: center top;

#header {
width: 895px;
height: 80px;
margin: 0 auto;}

/* end of header */

/* nav and menu */

#nav_wrapper {
clear: both;
width: 100%;
height: 40px;
background: #121616;
#nav {
width: 900px;
height: 20px;
padding-top: 3px;
margin: 0 auto;
background: #121616;
text-align: center;
#nav p {
font-size: 1em;
color: #65473b;
#nav a:link, a:visited {
color: #65473b;
font-family: Century gothic;
text-transform: uppercase;
font-size: 9pt;
#nav a:hover, a:active {
color: #7d5844;
text-decoration: none;
#top-menu {
padding: 0;
margin: 5px;
list-style: none;
float: left;
#top-menu li {
float: left;
#top-menu a:link, a:visited {
font-family: Century gothic;
font-size: 0.9em;
color: #65473b;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.01em;
padding: 5px;
font-variant: small-caps;
#top-menu a:hover, a:active {
color: #8b5d44;

/* end of nav and menu */

/* content */

#content_wrapper {
/* padding-bottom: 150px; must be same height as #footer_wrapper */
width: 100%;

#content {
width: 880px;
padding: 40px;
margin: 0 auto;
font-size: 8pt;

.columnleft {
width: 620px;
.columnright {
width: 240px;

.twitter {
width: 280px;
padding: 20px 0 0 5px;
float: right;
.blog {
padding: 20px 5px 0 0;
float: left;

/* end of content */

/* footer */

#footer_wrapper {
/* position: relative; */
/* margin-top: -150px; */
width: 100%;
height: 150px;
padding-top: 15px;
/* padding-bottom: -50px; can't have negative padding */
/* clear: both; */

#footer {
width: 880px;
margin: 0 auto;
/* padding-bottom: -50px; */
font-size: 9px;
line-height: 24px;
color: #4b534c;
font-weight: bold;
font-family:century gothic;
text-transform: uppercase;


#footer a {
text-decoration: none;
color: #426057;
font-weight: bold;

#footer a:hover {

/* end of footer */

/* rampage stuff */

.comments_header {
margin: 10px 0 10px 0;
.copyright {
.jumpbox {
font-family:century gothic;
text-transform: uppercase;
.code {
font-family:Courier new, courier;
.vote {
background-image: url('http://laurenbaker.us/ap/incentive.gif');
width: 70px;
height: 275px;
.license {
background: transparent url(http://laurenbaker.us/ap/share.png) no-repeat scroll 0px 0px !important;
.table {

margin-bottom: 10px;


<script language="JavaScript" src="include/javascript/stripjump.js" type="text/JavaScript"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9070c8a-9db3-41b0-94fb-37e5e0a20274&amp;type=website"></script>



<div id="container">
<div id="header_wrapper">
<div id="header">

<img src="http://laurenbaker.us/ap/logo.png" />

</div> <!-- /header -->
</div> <!-- /header_wrapper -->

<div id="nav_wrapper">
<div id="nav">

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=150');");
// End -->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12649905-1");
} catch(err) {}</script>

<ul id="top-menu">

<li><a href="http://aquapunk.net/comics/1/">first page</a></li>
<li><A HREF="javascript:popUp('http://laurenbaker.us/AP_player.htm')">soundtrack</a> </li>
<li style="margin: 0 5px 0 5px; color:#65473b"> | </li>
<li><a href="http://aquapunk.net">home</a></li>
<li><a href="http://aquapunk.net/archive.php">archives</a></li>
<li><a href="http://aquapunk.net/links.php">links</a></li>
<li><a href="http://aquapunk.tumblr.com/" target="_blank">blog</a></li>
<li><a href="http://rampagenetwork.com/community/viewforum.php?f=103" target="_blank">forum</a></li>
<li><a href="http://rampagenetwork.com">rampage network</a></li>


</div> <!-- /nav -->
</div> <!-- /nav_wrapper -->

<div id="content_wrapper">
<div id="content">

<h2>Lorem Ipsum</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae vestibulum felis.
Aenean hendrerit nulla convallis urna laoreet eget sodales turpis tempus. Pellentesque
sit amet odio ut nulla aliquet facilisis id sed nulla. In volutpat, lacus et aliquam
ornare, nisl justo volutpat lectus, ut consectetur odio sapien id leo. Sed vitae mi
ligula. Nulla facilisi. Donec in risus in erat suscipit lacinia. Pellentesque nec purus
ipsum, in tempus nisi. In eros arcu, feugiat id tempor in, aliquam a lectus. Sed feugiat,
orci quis consequat tempus, elit ligula vehicula eros, vel accumsan enim ante at lorem.
Donec rhoncus nibh risus, mollis gravida ligula. Donec sit amet mi elit, a volutpat
massa. Ut arcu erat, dictum sit amet sodales consequat, egestas eu erat. Ut auctor
feugiat nisl, quis pharetra nunc aliquam nec.

</div> <!-- /content -->
</div> <!-- /content_wrapper -->
<div class="cleaner"></div>
</div> <!-- /container -->

<div id="footer_wrapper">
<div id="footer">

All contents copyright 2008-2010 Lauren Baker. <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Some rights reserved. </a>
<br />
<img src="http://laurenbaker.us/ap/pw%20ad.gif" width="728" height="90" /></center>

</div> <!-- /footer -->
</div> <!-- /footer_wrapper -->

<!-- <p align="center" style="color: #000000;"><small><span class="copyright">Hosted By <a href="http://rampagenetwork.com">The Rampage Network</a></span></small></p> -->

Note: I took your CSS and pasted it into the head of the HTML document. You'll want to take that CSS and move it to your external file and add the link back.

Jul 1st, 2010, 06:44 PM
I know it's a mess, and I don't really have an excuse.

I did start off with a template that had a footer; though it doesn't bear any resemblance to it now. What with the footer not working and all, too.

Also, thank you for taking the time to go through my stuff... your solution didn't work, though. I guess I'm just gonna stop trying at this point: something about old dogs and new tricks. I also just don't have the time to keep trying to fix this if I don't truly know what I'm doing. Good thing code monkeys and web designers aren't in my target demographic.

Anyways, thanks again!

Jul 1st, 2010, 06:56 PM
It does work, actually (in Firefox 3, Safari 5 and IE 7, at least):


...assuming we're talking about the same thing when we say "sticky footer." This is what you're after, right? (http://ryanfait.com/sticky-footer/)

I made alterations to the HTML and the CSS; dunno if you caught that.

Jul 1st, 2010, 07:15 PM
Well why the hell does it work there, and not when I do it? I copy and pasted the whole thing, changed none of it other than adding {litera}{/literal} tags around the CSS and javascript so I don't get server errors, and replacing the navigation stuff with {include file="nav.tpl"}. FUUUUU-

Go back and look at my test page again if you don't believe me.

...okay, I just copy and pasted the information into ANOTHER page and saved it to my own website, and yes, you are correct. It does work.

Now give me a minute to see what's wrong with the AP.net page...


Well, I got nothing.

http://laurenbaker.us/test.htm and http://aquapunk.net/pages/test are identical, and yet... not. I think this is now a problem with my host or whatever, so I'm going to need to talk to the guy in charge of that.

This is fracking ridiculous.

Thanks a lot for your help, though.

Jul 1st, 2010, 08:11 PM
Just had a look at the two pages. The one on http://aquapunk.net/pages/test additionally contains this at line 315:

<link rel="stylesheet" type="text/css" href="http://laurenbaker.us/ap/v3style.css"/>

I think this is the problem - take it out and your footer gets sticky again.

Jul 1st, 2010, 08:23 PM

Huh, I don't remember putting that in that file to be called, especially if it's redundant.

Thank you guys SO much.

Jul 2nd, 2010, 02:13 AM
Oh god I hate to bug, but, the code that you gave me, msuffern, seems to slip up here:


Know of any way I could prevent the content from overflowing onto the footer when there's a little too much, or when the window is resized and made a lot smaller?

Jul 2nd, 2010, 02:45 AM
You have to give a bottom padding to your #content that is greater than the height of your footer.

Jul 2nd, 2010, 02:46 AM
I would recommend starting here:

W3C Validator (http://validator.w3.org/check?uri=http%3A%2F%2Faquapunk.net%2Flinks.php&charset=%28detect+automatically%29&doctype=Inline&group=0)

If you make your pages valid, I think you'll find that not only will the sticky footer work correctly for ALL your pages, your page will look the same in all browsers (aside from a few possible quirks in IE). Have you checked your page on various browsers?

Jul 2nd, 2010, 03:01 AM
@Eng: Ah, dur. Thanks! If I've been staring at this crap for days in a row, I guess I need the obvious pointed out to me.

@msuffern: I'll consider doing that the next time I redesign this thing... I just don't have the energy to do it this time around. And as far as browsers go, I check on FF, IE, and Chrome since they comprise 90% of my visitors. I know I should care about the other 10%, buuuut so long as my comic's readable and the site's navigable, then that's all that matters to me. I'm a cartoonist first, web designer... 8th. :P