As much as I like CSS, it took me a while to figure out a few things. Full-screen layouts, for one. Many sites use a footer at the bottom and, as easy as it is in HTML tables, it's not quite so obvious in CSS. Here's how to do it.

Ok, First things first. We need to set the height of the page itself to the full height of the browser window, whatever that may be. We also need to remove any margins between the page content and the browser window. We do it in the CSS stylesheet like this:

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

Because of the way the footer will be placed, we also need an all-encompassing <div> block to put all our code in. Let's call it 'page'.

.page{
    position: relative;
    min-height: 100%;
}

We're also going to need a footer <div> block. It doesn't really matter where you put it in your html, as long as it (along with everything else) goes inside the <div class="main"> block. But it does need to be outside of any further divs. But it has some unique styles.

First of all, it needs to be absolutely positioned. It will also need to be placed at the bottom of its parent element (the page div). Its CSS looks like this:

.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    background-color: #ccc;
}

Notice that I've given it a background color, width and height as well. This is because it's most likely going to reside along the bottom of the screen, full width. Also, the height is quite important to note. Bear in mind that a full screen's worth of content will pass under this footer block. With that in mind, to the page contents' div block, you can add a bottom-margin of 25px so that all content will be visible on-screen.

Finally, we need to add some padding-bottom to the body, to make sure the footer doesn't sit on top of the content:

.body{
    padding-bottom: 25px;
}

See? Nice and easy! I've added a full template that I use at work on the next page.