One of the most common layouts on the web is a fixed width site that stretches to the bottom of the page, with a footer sitting at the bottom. If the content of the page stretches past the bottom, the site container needs to stretch with it. If the content does not fill the page, the footer needs to remain at the bottom. With a table based layout, this would be a simple task, but who wants to use tables for layout? With some nifty CSS tricks we can accomplish this very well using CSS alone and once you know how its done, you will use it over and over again.

Centering the Layout

The first thing we need to do is centre the layout. We will create a site that is 800px wide in this example, centered in our browser. To do this we need the following code:

body {
margin:0px;
padding:0px;
text-align:center;
}


.container {
width:800px;
text-align:left;
margin:auto;
}


The text-align:center command in the body tag is needed to centre our .container div. We then need to align the text back to the left in our container and apply margin:auto to move the container div into the centre of the page.

Achieving 100% height

Making your site stretch to 100% height is slightly more complicated. Due to difference in the way browsers render css we will need to use a nifty CSS hack to achieve what we want. Here is what our code will look like with the next set of declarations added:

html, body {
margin:0px;
padding:0px;
text-align:center;
height:100%;
}


.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
}


* html {.container:height:100%;}


In the first block of code we have added ‘html’ to the body section. This is because we need the body to stretch to 100% of the height of its containing element, which is the html, so we too have set this to 100% height.

In the container, we have added ‘min-height:100%’ which tells all browsers apart from Internet Explorer 6 and below that 100% is the minimum height, and if the content expands beyond this, the container will automatically expand with it. As Internet Explorer 6 and below do not understand this command, we need to pass a value of height:100% to these browsers only, as they treat height:100% to mean the same as min-height, therefore allowing the container to expand. We do this with the universal selector hack.

Adding the footer

We now have a 100% height, centred layout and its time to add the footer. Here is the next bit of code we need to add:

.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
position:relative;
}



.footer {
position:absolute;
bottom:0px;
height:150px;
}


.clearfooter {
clear:both;
height:170px;
}

The first thing we have done here is add position:relative to the container. This allows us to position the footer absolutely within it. We want it to sit on the bottom of the page so we have added the bottom:0px to achieve this.

Unfortunately, by positioning the footer absolutely, we have taken the footer out of the flow of the document and therefore, any content will disappear behind the footer. To fix this we add a .clearfooter section which sits behind the footer and fixes this problem.

The HTML

Here is the basic layout that needs to be added to your HTML document:

<div class="container">


<p>
Add your header and menu as required
<p>


<div class="clearfooter">
</div>


<div class="footer">
Footer contents here
</div>


</div>


Wrap Up

All the code you need for this very effective layout is provided here. To see how it all slots together and to see a real world example, you may download this template so you can see how you can expand the code used here.