Positioning the footer at the bottom of the page.

A pure CSS solution.

There are two obvious solutions for a footer.

Have the footer always appear at the bottom of the content - i.e. if the content is short, the footer might appear halfway up the screen.
Position the footer absolutely so it stays at the bottom of the window no matter how long the content is. This way, even on a very long page, the footer is always visible.

Each of these solutions has its merits, but I often want the best of both worlds.

That's why I came up with a method of positioning the footer at the bottom of the screen, but only until the content overflows the page. At this point, the css tells the footer to clear the content, meaning it is now at the bottom of the content instead of the bottom of the screen.

Although I couldn't find a solution like this when I rummaged around on google, I figured it would be pretty commonplace and I just wasn't using the right search terms. That may indeed be the case, but when I suggested to a co-worker that he do something like this on one of his sites, he said it couldn't be done with CSS alone. That's what motivated me to put this solution up here for the world to see and use.

HTML

The html is fairly simple, just make sure you get the structure right.

<div class="shell">
  <div class="albumen">
    <div class="yolk">
      all your content, excluing footer
    </div>
    <div class="footerclear"></div>
    <div class="footer"></div>
  </div>
</div>

tip:

Often I need to contain the "shell" div inside other divs for layout purposes. make sure all the containing divs have min-height:100%; and _height:100%; set.

CSS

Just make sure you keep all the things I've noted as required. I find the best way to use this solution is to start with the framework and make your changes one at a time, with regular testing in all the browsers you want compatibility with.

html, body {
	margin:0;			/*required*/
	padding:0;			/*required*/
	border:0;			/*required*/
	height:100%;		/*required*/
}

.shell {
	width:800px;
	margin:auto;
	min-height:100%;	/*required*/
	_height:100%;		/*required for IE*/
	position:relative;	/*required*/
}

.albumen {
	height:100%;		/*required*/
}

.footerclear {
	height:44px;		/*total height of .footer*/
}
.footer {
	height:44px;
	bottom:0;			/*required*/
	position:absolute;	/*required*/
	width:800px;
	margin:auto;
	background-color:#CCCCCC;
}

I use this framework as a starting point, but be prepared for a bit of trial and error when it comes to styling your site the way you want it to look. It's not simple, and you need to have a bit of a mind for CSS.

Positioning the footer at the bottom of the page.

A pure CSS solution.

HTML

CSS

More...