Keep that footer DOWN.

OK, I’ve struggled with this issue for weeks: the dreaded footer that wants to slip and slide its way up and down the page, going wherever it wants to go. The result is a tacky- and unprofessional-looking footer that ruins your entire layout. So if you have any pages that have less content than your others, make sure you have a fixed footer. Here’s how to get one:

First, ensure all your HTML is in the correct format, like this. (Note that in the header and footer, I just used <h1> and <footer>, but feel free to use divs, as well. It doesn’t matter.)

<div id=”container”>


<div id=”nav”>Nav bar here.</div>

<div id=”content”>Content Here.</div>


<footer>Footer Here.</footer>

OK, easy. So now, we need to make a couple adjustments to the footer in order to make it do what we want.

First, make sure you have these elements in your container: { min-height: 100%; margin-bottom: -330px; position: relative; }

…And these elements in your footer: { height: 330px; position: relative; }

Note that the margin-bottom (-330px) and the footer height (330px) add up to make 0. You can use any value you want here — just make sure they complement each other, or your pages won’t look right.

Now, there’s one more line of code we need to add for this to work: a div class we will call “footerfix.”
 Before you close your container div, add this:


And in your style sheet, create the class, like so:

.footerfix {

height: 330px;

clear: both;


Done! Your footer should anchor to the bottom of the screen, no matter how short your content is, like so:


(Lol at my “how to take a screenshot tab.)

For the noobs!

-Mollie Durkin

~ by molliedurkin on October 15, 2012.

%d bloggers like this: