Blogroll
Search

Create Three column layout using div and CSS

By admin | March 19, 2008

In this tutorial you will learn to create a three column layout using css, and divs
Here is the sample sketch of layout.

Sketch layout

1. First of all we need to create a container for page contents.

<div id=”container”> </div>

2. Now create three partitions of it by creating three divs(header, content and footer) inside the container tag.

3. Finally add three more divs inside the content part. We will use these three divs to create columns in content area.

Html code for above code is:

______________________________________________________

<div id=”container”>

<div id=”header”>Header</div>

<div id=”content”>
<div class=”col1″>Column 1</div>
<div class=”col2″>Column 2</div>
<div class=”col3″>Column 3</div>
</div>

<div id=”footer”>Footer</div>
</div>
Now move to css part create the following code in your css file:
body {
margin:0;
padding:0;
}

#container {
margin:0;
width:960px;
}

#container #header {
height:100px;
background-color:#FFFFCC;
text-align:center;
font:24px Verdana, Arial, Helvetica, sans-serif;
}

#container #content {
font:12px Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}

#content .col1 {
float:left;
width:200px;
height:400px;
background-color:#99CCFF;
}

#content .col2 {
float:left;
width:540px;
margin-left:10px;
background-color:#CC99FF;
height:400px;
}

#content .col3 {
float:right;
width:200px;
background-color:#99FFCC;
height:400px;
}

#container #footer {
clear:both;
background-color:#996633;
font:12px Arial, Helvetica, sans-serif;
text-align:center;
}

Float property inside the col1, col2 and col3 classes will align the three divs left to right. Note that in the footer I used clear: both. Clear property should be used to clear heights of floating elements. “Both” used to clear right and left floating elements.

Here is the result:

3 column layout result

Topics: CSS, Html |

4 Responses to “Create Three column layout using div and CSS”

  1. Jimmy Says:
    March 21st, 2008 at 3:37 pm

    Thanks! It is very useful for me. It is exactly what i was looking for. Keep it up mate.

  2. Brad Says:
    July 31st, 2008 at 6:11 am

    Yes thanks a lot, this got the concepts across to effectively.

  3. Daniel Says:
    August 6th, 2008 at 12:58 am

    I read similar article also named e Three column layout using div and CSS | Web Designing Tips, Tricks & Tutorials, and it was completely different. Personally, I agree with you more, because this article makes a little bit more sense for me

  4. cyber5 Says:
    August 13th, 2008 at 9:41 pm

    Great starting place on familiarizing yourself with the idea of using CSS positioning vs. tables. Loved it.

Comments