lots of code take some code, share some code!

This is a basic tutorial on how to create a basic css layout with three columns.

So to start in your css you need four classes / containers to begin.

Firsts your container for all the other containers becomes some what of a wrapper for all the other containers, in the class you will need assign the dimensions of the container - mainly the width and thenany other styles like borders can be added to make it your own. Our css and the html for the main container will look like this.

<style type="text/css">
#mainContainer
{
width: 760px;
border: 1px outset red;
}
</style>

<div id="mainContainer">

</div>

So now we have the main container we can create the left and the right containers for the content, we need to set a fixed with for both of the containers like so.

<style type="text/css">
#leftColumn
{
float: left;
width: 120px;
}
</style>

<div id="leftColumn">
This is my left column
</div>

So in a nut shell we have used the css property float to align the left box to the left. Thr process for the right is the same exept we float the div to the right (obviously) so ...

<style type="text/css">
#rightColumn
{
float: right;
width: 120px;
}
</style>

<div id="rightColumn">
This is my right column
</div>

Now all that is left is the center container, not this container is positioned below both floating div's and we set a margin from both the left and the right which then positions the center column directly in the middle.

<style type="text/css">
#centerColumn
{
margin-left: 140px;
margin-right: 140px;
}
</style>

<div id="centerColumn">
This is my center column
</div>

Now to sum things up, here is the whole code.

<style type="text/css">
#mainContainer
{
width: 760px;
border: 1px outset red;
}

#leftColumn
{
float: left;
width: 120px;
}

#rightColumn
{
float: right;
width: 120px;
}

#centerColumn
{
margin-left: 140px;
margin-right: 140px;
}
</style>
<div id="mainContainer">
<div id="leftColumn">
This is my left column
</div>
<div id="rightColumn">
This is my right column
</div>
<div id="centerColumn">
This is my center column, it is essential that this div is place below the other two floating divs
</div>
</div>

So now you shold be presented with nice clean boxed layout purley in css.

Any problems please let me know.

More layouts available, suh as Three Columns with Header, Menu and Footer

Filed under: CSS, Tutorials, CSS, Firefox, xHTML