SpeekGeek - Do You Speek Geek? » A simple 3 column CSS layout tutorial.

A simple 3 column CSS layout tutorial.

February 15, 2007 at 5:31 pm by Kane · Filed under , ,

Here is a very simple tutorial on how to make a 3 column CSS (Cascading Style Sheets) based web page that will ultimately look like this;

You can see that there are 3 sections to the page, the left, middle and right hand side. We will refer to these as the Left Sidebar, Content and Right Sidebar. This style of page is well used because it offers an area for navigation of the website, an area for the content of the page and an area for miscellaneous extras. It is also an example of a fluid layout;- as the resolution of the viewers monitor increases, so does the size of the content area.

Let’s begin!

With a CSS based website, there are two aspects to the design, the CSS and the HTML. The CSS will refer to the design, shape, form, formatting etc. of the features of the page, the HTML will call it up. There are many ways of relating the CSS and HTML, however for good practise we shall store the CSS code in its own file, and the HTML (which will be the page you will view) in another. The reason this is good practise is when you have lots of pages relating to the same CSS file and you would like to change a certain aspect of the websites design, you will only have to edit the CSS file.

Create the files.
Open up your favourite text editor, save the file, one as style.css and another as index.html. These will be the two files we will be working with. I think the file types give it away when the style.css file will contain the CSS code and the index.html file will contain the HTML code.
Working with CSS.
Please refer to this post to understand the syntax of CSS and how it works. It was rather long winded so I created a seperate post of it.

Entering the CSS Code.

For this example we shall be using the below CSS code for our page design.

#leftsidebar {
position: absolute;
left:10px;
top:15px;
width:200px;
background:#fff;
border:1px solid #000;
}

#content {
background:#fff;
margin-left: 200px;
margin-right:200px;
border:1px solid #000;
}

#rightsidebar {
position: absolute;
right:10px;
top:15px;
width:200px;
background:#fff;
border:1px solid #000;
}

You can see how each selector represents each part of the website. Now that is all that is needed for the CSS code, now on to creating the HTML page.

Working with HTML.
If you have never worked with HTML before, you should note for every HTML page it should follow the following format.
```
<html>
 <head>
  <title></title>
 <head>
 <body>
  Code Here
 </body>
</html>
```
Enter this into your index.html file and then we shall continue.
The HTML Code.
You already have the basic format, so throw in whatever title you would like. And then add this line of code into the head section;
```
<link href="style.css" rel="stylesheet" type="text/css" media="all">
```
As long as you make sure that your style.css file and index.html file are in the same directory this line of code will set up the relational link between your HTML file and CSS file, essentially showing the browser where to look for the CSS code when it views the page.

Now in the body section enter this code;
```
<div id="leftsidebar"></div>
<div id="content"></div>
<div id="rightsidebar"></div>
```
Using the DIV tag, we are calling up the values and properties of the selectors which are represented by the IDs. Therefore, your ID of the DIV tag will need to be the same as what you named the selector which you want to use.
That’s it!
You’ve done it! You have created the structure of a 3 column website using CSS. You can put some content or lorem ipsum as we have into the sections to see how the page looks like we have in the files below.

style.css

index.html

Obviously there is a lot more to CSS than just this, but I hope this gives a good insight into how CSS works and has given you a good example to work with to apply to future designs. Even though this is quite a long post, it does go into quite a bit of detail which will help whenever you work with CSS.

Similar Posts: