CSS Two Columns
This tutorial will show you how to create a basic two column website, with a header, a left column, a right column, and a footer.
To begin with, I would create some sort of container or wrapper
<div id="container">
</div>
Using this container we can define the width of the site using CSS, say we want to make it 800 pixels wide, the corresponding CSS would be:
#container {
width:800px;
}
Next we’re going to include the header
<div id="container">
<div id="header">Header text</div>
</div>
Using CSS you can control the height and other aspects of the header.
Next is to introduce the left and right columns.
<div id="container">
<div id="header"><h1>Header text</h1></div>
<div id="columnLeft">
<p>left content</p>
</div>
<div id="columnRight">
<p>right content</p>
</div>
</div>
Alone these DIVs won’t do much, but with some CSS we’ll soon have them in the right places.
With CSS we can define whether the column is a fixed height, or fluid. For most applications, you will find that a fluid height is required. Playing around with the CSS I’m sure you’ll be able to find what suits your needs best
#columnLeft {
float:left;
width:200px;
}
#columnRight {
float:right;
width:600px;
}
As you can see, this is very simple, and will work fine without a footer in place. Once you include a footer however, you will have issues with content floating over the footer and looking rather odd. So for this purpose we need to include a clearing element in the footer itself.
<div id="container">
<div id="header"><h1>Header text</h1></div>
<div id="columnLeft">
<p>left content</p>
</div>
<div id="columnRight">
<p>right content</p>
</div>
<div id="footer"><p>footer content</p></div>
</div>
The clear attribute stops an element from float over another element below it. So to stop the columns floating over we need to clear both.
#footer {
clear:both;
}
So here is the code summarised:
HTML:
<div id="container">
<div id="header"><h1>Header text</h1></div>
<div id="columnLeft">
<p>left content</p>
</div>
<div id="columnRight">
<p>right content</p>
</div>
<div id="footer"><p>footer content</p></div>
</div>
CSS:
#container {
width:800px;
}
#header {
}
#columnLeft {
float:left;
width:200px;
}
#columnRight {
float:right;
width:600px;
}
#footer {
clear:both;
}
Tweaking this code should give you the desired results from a two column layout, adding in your own DIVs above and below the columns won’t effect the columns at all, so play about and see what you can come up with!
