How to Fix the 3-Column, Fixed Width Layout with CSS
Mar 08, 2012, by admin
The three-column layout is perhaps the second mainly general layout used for websites. There’s typically a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some extra substance, whatever that may be. What you place inside your columns doesn’t matter – the way to accomplish the 3-column layout settles the same.
So let’s start with our fundamental HTML to put all the parts on paper — or in our case, on line. This is the fundamental outline of what’s between the body tags:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”column-left”></div>
<div id=”column-center”></div>
<div id=”column-right”></div>
<div id=”footer”></div>
</div>
For the whole HTML code – to comprise some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers present that aspect.
And of course what we get, is NOT a 3-column layout. It’s just one separation on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!
First , and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the better details Center-aligning a Website right here already. Here is the CSS that does that:
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}
#header {
background: black;
color: white;
}
#column-left {
background: red;
}
#column-center {
background: yellow;
}
#column-right {
background: purple;
}
#footer {
background: green;
}
(Please note that you should actually be using curse or rbg color codes, but for the reason of this expression, color names are just easier to deal with.)
And it looks Like This. Now we just have to get our columns to perform like columns and line up next to each other. There are dissimilar methods to do this, but I prefer to just drift them all. So we’ll give them all a width and add float: left; to our three columns:
#column-left {
width: 250px;
float: left;
background: red;
}
#column-center {
width: 480px;
float: left;
background: yellow;
}
#column-right {
width: 250px;
float: left;
background: purple;
}
At this point, it’s significant to be conscious of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any real space among us. So just as you can put a box under a balloon without the two influencing each other’s space, our footer will act like the floated separations are not even there, and line itself up precisely right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:
#footer {
clear: both;
background: green;
}
and now the entire thing looks Like This. And there you have it!
A little things can go wrong, and here is some easy, beginning damage control: If you see your columns NOT all sitting next to each other, it’s likely because the total sum of all their widths, paddings, and margins united is GREATER THAN the width of their containing wrapper. So put one of your columns on a diet and cut its width down some – and things should fall into place beautifully. And if not, ask for help at the Killersites Community.
