Free Code Collection

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

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

 HTML | 
 copy code |
?
 
1
<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:
______________________________________________________

 HTML | 
 copy code |
?
 
01
<div id=”container”> 
02
 
03
<div id=”header”>Header</div> 
04
 
05
<div id=”content”> 
06
<div class=”col1″>Column 1</div> 
07
<div class=”col2″>Column 2</div> 
08
<div class=”col3″>Column 3</div> 
09
</div> 
10
 
11
<div id=”footer”>Footer</div> 
12
</div>

Now move to css part create the following code in your css file:

 CSS | 
 copy code |
?
 
01
body { 
02
margin:0; 
03
padding:0; 
04
} 
05
 
06
#container { 
07
margin:0; 
08
width:960px; 
09
} 
10
 
11
#container #header { 
12
height:100px; 
13
background-color:#FFFFCC; 
14
text-align:center; 
15
font:24px Verdana, Arial, Helvetica, sans-serif; 
16
} 
17
 
18
#container #content { 
19
font:12px Verdana, Arial, Helvetica, sans-serif; 
20
text-align:center; 
21
} 
22
 
23
#content .col1 { 
24
float:left; 
25
width:200px; 
26
height:400px; 
27
background-color:#99CCFF; 
28
} 
29
 
30
#content .col2 { 
31
float:left; 
32
width:540px; 
33
margin-left:10px; 
34
background-color:#CC99FF; 
35
height:400px; 
36
} 
37
 
38
#content .col3 { 
39
float:right; 
40
width:200px; 
41
background-color:#99FFCC; 
42
height:400px; 
43
} 
44
 
45
#container #footer { 
46
clear:both; 
47
background-color:#996633; 
48
font:12px Arial, Helvetica, sans-serif; 
49
text-align:center; 
50
}

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: