This page applies "100% height" (or more appropriately, "fill up at least the view port"), the block centering trick to the whole document, and placing a footer at the bottom of the viewport, always.
This is a very common situation for the very beginnings of a CSS layout. Individually, the components are simple to create. However, new developers often scratch their heads when trying to press them into a single coherent stylesheet.
Some important things to realize. First, by and large, this trick is done without the help of ANY structural elements (ie. divs). The code adds one by necessity: div id="footer". If there wasn't this element, we could never isolate the footer and place it at the bottom. The other element that I've added is for simplicity: div id="wrapper". This element wraps everything on the page. We need this for a couple reasons:
Let's understand what we're doing first. The first step is to make the misnamed 100% height trick work. From the sample code elsewhere, nothing changes. We apply it to the html and body elements and we're done.
Second, we apply block centering. Again, by and large, this trick works unmodified. We apply the margin: 0 auto; to the body and we're done. Well, sort of. We need to give the body width (in this case, I use percentages and a fixed min-width). The code also adds in the text-align trick for older version of IE which misapplied inline element centering to blocks.
By far the most complex is positioning the footer to the bottom of the viewport, when the content's height is less than the viewport, or otherwise at the bottom of the content. This is not as easy as it sounds because we're talking about moving an element relative to two different things. So this, I will explain in detail:
First, we recognize that it is the footer is going to be positioned relative to the body element. This is important to keep in mind because when we applied the "100% height" trick, the body will now be AT LEAST the height of the viewport. So to make the footer position relative to it, we add position: relative;. Genius!
Second, positioning the footer relative to the body also means that when the content extends, so will the position of the footer. This means when we have content below the fold, our footer will follow. The problem though, is that since the footer is positioned absolutely, it is removed from the document flow and will overlap the content. This is perhaps the biggest problem.
Enter a container. Since we have set a height to the body, we cannot simply add padding to the bottom because this will enlarge the height of the body. Instead, we can rely on another element, in this case wrapper, to do our dirty work. Wrapper will only be the height of content PLUS an extra 2em buffer. The 2em buffer is where our footer will sit when the content is longer than the viewport. In the case that it is not, the buffer will not alter the layout because the min-height of the body element will control.
That's all there is to it. Here's the final version of the CSS, commented in full!
/* remove annoying padding/margins from
the html and body elements-margins are
readded to body in the body selector for
centering */
html, body { margin: 0; padding: 0; }
/* this is the first step to the
old IE5, non-standard way of centering blocks */
* html { text-align: center; }
html {
/* give the HTML element a background
color */
background-color: #b6b6b6;
/* first part of the "100%" height
trick */
height: 100%;
}
body {
/* make our fonts look a bit nicer */
font-family: verdana, arial, helvetica, sans-serif;
font-size: 82%;
/* make the background standout */
background-color: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
/* centering trick */
margin: 0 auto;
/* you need a width that's "less
than the available space to center */
width: 80%;
/* However, make sure that the body is never
narrower than this--
NOTE: IE ignores this-see the next
selector */
min-width: 45em;
/* make the body AT LEAST the height
of the view port--
NOTE: IE ignores this-see the next
selector */
min-height: 100%;
/* use this to place the footer */
position: relative;
}
* html body {
/* IE doesn't understand min-height,
but it treats height AS min-height
so this won't hurt the layout */
height: 100%;
/* IE doesn't understand width, but it
treats width as min-width, HOWEVER
we will not get the "flowing" behavior
of good browsers */
width: 45em;
/* this is the last step in old, non-standard
IE block centering */
text-align: left;
}
/* this element relieves us of some of the major
headaches involving doing 100% and an absolutely
positioned footer. */
#wrapper {
/* make the text not touch the edges of the body */
padding: 0 5px;
/* do not overlap the footer if the content is
larger than the viewport */
padding-bottom: 2em;
}
#footer {
/* start this element at the VERY
bottom of the page */
position: absolute;
bottom: 0; left: 0;
/* border: 1px solid #000;*/
background: #fff;
/* since it is absolutely positioned, we need
to give it 100% width */
width: 100%;
text-align: center;
}
#footer p { margin: 0; padding: 0; }