Three Column CSS (Tableless) Layout
Mastering a two-column layout is all well and good but what if, like many others, you want a three column layout? Although it's not as hard as you might think, there's no float: center;, so we have to do a little fiddling to get everything to sit properly.
This is what we'll want to replicate:
| header image | ||
| menucolumn | content column | linkscolumn |
First things first, we need to set up out container and work out how big we want our columns to be. Let's say we want our left and right columns to be equal — say 150 pixels wide — our middle column needs to be of sufficient size and yet small enough to fit in an 800x600 resolution. We'll set it at 400 pixels: this gives us a container size of 700 pixels.
We'll set this out like so:
<div id="container">
</div>
..with the following in our stylesheet (take note of the centering trick with margins, this can be removed if you want the layout aligned to the left):
#container {
width: 700px;
margin: 0 auto;
}
Next we add the header and columns to our HTML:
<div id="container">
<div id="header"> </div>
<div id="leftbar"> left bar </div>
<div id="content"> content </div>
<div id="rightbar"> right bar </div>
</div>
..and the widths we'd previously decided on to our CSS:
#container {
width: 700px;
margin: 0 auto;
}
#leftbar {
width: 150px;
}
#content {
width: 400px;
}
#rightbar {
width: 150px;
}
We can now work on sorting out the floats. There are two common methods and my favourite involves setting the float for the middle column to left. This floats it left — but keeps the left column on the left too. Boy, there's too many "left"s in this sentence! Anyway, providing we keep the widths at the right measurement it is possible to align the center column to the left without screwing everything up while aligning the right column to the right:
#container {
width: 700px;
margin: 0 auto;
}
#leftbar {
float: left;
width: 150px;
}
#content {
float: left;
width: 400px;
}
#rightbar {
float: right;
width: 150px;
}
...and it's actually as simple as that. Funny, it seems more simple than the two-column layout. Don't forget the following:
- Take any padding you add, away from the total width.
- Take any border widths away from the total width.
- To add a background to the container you must add a clearer below the columns.
What's a clearer?
It's a word I made up to describe an 'action' we must do to clear the floats of <div>s to allow any backgrounds assigned to a container <div> to display properly. Add <div id="footer"> </div> below your columns, before the closing </div> of the container. Then, add the following to your stylesheet:
#footer {
clear: both;
}
Simple as that. If you don't "get it" or are having troubles with your columns, you can download a basic three-column template.
Tags:
,
Last Updated On: 25th February 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources