CSS Tutorial: 3 Columns Website Layout

Filed under Web Design

Designing with CSS and layers can sometime be more challenging than using tables. The main advantages are flexibility and precision.

Today I’m going to show you how to build a 3 columns layout with CSS. I’m going to assume you already know how to setup a website with Dreamweaver or your favorite HTML editor.

3 Columns, Centered, Static Width

First, we’re going to create two files: index.html and style.css. Don’t forget to attach the style sheet to index.html.
Let’s put in place our frame which will contain every other objects and layers.
```
<div id=”divFrame”></div>
```
We’re now going to make everything centered through our style sheet:
```
body {text-align: center;}
```

Now set the style attributes for our frame in style.css:

#divFrame {
width: 760px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

Add a new header layer into our frame:

<div id=”divFrame”>
    <div id=”divHeader”></div>
</div>

Set the style attributes for the header:

#divHeader {width: 100%;height: 100px; background-color: #003366; }

A top menu could be useful. Let’s add a new layer to our frame, right after the header:

<div id=”divFrame”>
    <div id=”divHeader”>    </div>
    <div id=”divTopMenu”>   </div>
</div>

Set the style attributes for the top menu:

#divTopMenu {width: 100%;height: 20px; background-color: #000000;}

We’re going to need a container for our columns so that a background image can be used to cover the full width of the page:

<div id=”divFrame”>
    <div id=”divHeader”></div>
    <div id=”divTopMenu”></div>
    <div id=”divBody”></div>
</div>

Set the style attributes of the container:

#divBody {
     position: relative;
     width: 100%;
     background-image: url(images/background.jpg);
     background-repeat: repeat-y;
     padding-top: 15px;
}

Now we’re going to add all three layers for our columns into our container:

<div id=”divBody”>
     <div id=”divLeftCol”></div>
     <div id=”divContent”></div>
     <div id=”divRightCol”></div>
</div>

Set the attributes of all three columns:

#divLeftCol {
     width: 130px;
     float: left;
}

#divContent {
     position: relative;
     width: 470px;
     margin-left: 15px;
     float: left;
     padding-bottom: 15px;
}

#divRightCol {
     position: relative;
     width: 130px;
     float: right;
}

Add a layer for the footer right after the container (divBody):
```
<div id=”divFooter”></div>
```

Set the footer’s CSS attributes:

#divFooter {
 position: relative;
 height: 22px;
 width: 100%;
 background-color: #333333;
}

Alhtough I’ve added some text and a logo to the webpage, this is what it should look like:

CSS Tutorial - 3 Columns Website Layout

Download the source code for this CSS tutorial here

Share This Post

Comments (0) Posted by Stephane on Friday, September 14th, 2007

You can follow any responses to this entry through the magic of "RSS 2.0" and leave a trackback from your own site.