3 Column Layout using pure CSS
In the earlier days of learning CSS, I was stumped by a constantly nagging problem - why can’t one have an equally simple means of deploying a 3 column layout without using tables? Two columns are easy using the float attribute left and right, but things got tricky when it was 3 and above. After a brainstorming session, I found an efficient way to do this.
Advantages:
- Works in Internet 6, Internet 7 and Firefox
- Applies also to the <p> tag
- Reusable for layouts that have more than one group of 3 columns
First of all, create have 4 Div tags in this hierarchy. Create all Div tags with the following class names.
maincolumn (parent)
a. left – for the left Div tag (under maincolumn)
b. center – for the Div in the middle (under maincolumn)
c. right – for the right Div tag (under maincolumn)
So we have 1 Div tag with 3 Div tags inside. You should have the following by now:
Design View:
Code View
We will create a CSS rule for the classes you declared with the div tags. But before that, Explanations for each div are below, after which the full code is in the quotes
1. maincolumn: we will be using a 306px width, the reason behind being a 3px space between on both sides of the center div. more on this further.
2. left: we will “float this” to the left with a width of 100px. Self explanatory
3. center: this is where the trick sets in. We will “float” the center to the left, but in addition, we will set the margins to “auto”, “0″ and “3px” respectively. The 3px serves as the “spacing” for the left side of the center tag.
4. right: we float to the right with a width of 100px
Here’s the final code below:
.maincolumn {
width: 306px;
overflow: auto;
}
.maincolumn .left {
float: left;
width: 100px;
}
.maincolumn .center {
width: 100px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 3px;
float: left;
}
.maincolumn .right {
float: right;
width: 100px;
}
.clear {
clear:both;
}
If done correctly, the space between the center and the right div will also be 3px, which makes everything balanced. All this thanks to the width of the overall div tag maincolumn.
That’s it! You now have a 3 column layout!
If this was helpful, I did like to know. A comment would be nice.
Download the files here
NB: You can add the following code the the maincolumn class if you want to centralize everything:
margin: 0 auto;
Tags: css, css tutorials, pure css layout, three column layout
