I got some simple CSS from http://www.cssstickyfooter.com/ to get a footer that always sticks no matter how long the content is. Now, this isn’t actually working. I’m having two different problems with this footer, but I’m going to ask them both here because I suspect they’re related.
First here’s the css from the site:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
And here’s the HTML I’m using for the whole page:
<html>
<head>
<title>{$title_text}</title>
<link rel="stylesheet" type="text/css" href="/global/global.css" />
</head>
<body>
<div id="wrap">
{$navbar}<hr><div id="content">{$body}</div>
</div>
<div id="footer">
{$footer}
</div>
</body>
</html>
As you can see, there are some variables formatted as {$variable}. These are pulled from another file/string.
Problem 1:
The footer is too high and overlaps with the other content on the page. Here’s what that looks like:
To try to solve this problem, what I did was I added 200px of padding to the div of ID wrap, which is right before the footer (see HTML above). This will fix the problem you see in the picture there. But it causes another issue: now on pages with very little content, the footer is still moved down 200px, and you have to scroll down to see it. The site I got this CSS code from said this shouldn’t happen.
Problem 2:
The footer doesn’t reach the edges of the browser’s window. Here’s what I’m talking about:
The footer should be "touching" the right and left sides of the window, but as you can see, there seems to be a small margin. Honestly, I’m not sure how to start fixing this. But I don’t think it’s a bug because it renders the same way in Chrome, Firefox, and I think even in Internet Explorer.
Any input is welcome. Thanks for looking!
Your html doesn’t appear to match your css. Your css contains a ‘#main’ but your main content appears in