This post looks at how to create a very basic fixed width three column layout using CSS where the footer will appear below the three columns no matter how long each of the columns is.
Example
A very plain example of this layout can be found here. Intially the three columns are all the same height but there are links to add content to the columns to make them different heights using jQuery’s .append() function (more about how to do this in my dynamically get and set an elements content with jQuery post).
Viewing the source of that example page will show the basic skeleton with comments for all the CSS. Please remember that this is just a very basic example.
The HTML
Here’s the very basic HTML for this layout of what would appear between the <body> tags:
<div id="container"> <div id="left"> </div> <div id="right"> </div> <div id="content"> </div> <div class="clear"></div> <div id="footer"> </div> </div>
As you can see, the left and right columns appear above the main content area in the HTML source. This may or may not be a consideration for you using this layout.
The CSS
The basic CSS with no styling is below. After that some comments about what each element does.
#container {
width: 700px;
}
#left {
float: left;
width: 150px;
}
#content {
padding: 0 210px 0 160px;
}
#right {
float: right;
width: 200px;
}
.clear {
clear: both;
}
The widths can be whatever you want them to be, the pixel amounts in the above are just examples.
The #content left and right padding needs to be #left width and #right width respectively plus whatever extra left-right padding you want for the main content area. In the example above #content effectively has 10 pixels of padding left and right.
The .clear div clears the floats and makes sure #footer always appears below the three columns no matter how high they are.
Background/border issues
The background colours/images and CSS borders (see the example and add content to the columns to see) won’t go all the way to the bottom when the columns are different sizes, and the #content’s background appears behind both the #left and #right divs. This may or may not be a problem for you.
However, because this is a fixed width it’s easy enough to make a background image with borders/background colours in the image, and assign it to #container. I will look at this in next week’s post. Make sure you subscribe to my RSS feed (see below) so you know when this has been posted.
