This is a tutorial on how to use CSS to create a simple two column layout.

The layout consists of a header, a main content column, a sidebar, and a footer. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.

1. Basic structure

First of all, we create the basic HTML structure:

[code lang="htmlstrict"]

   

   

   

   


[/code]

After that, we put some content in the different sections:

[code lang="htmlstrict"]

    

       
Company Name
       
Type your slogan
    

         

            
Navigation
			   

				  
Home
				  
About us
				  
Srevices
				  
Contact
				  
Sitemap
			   
         

              

	            
Content
	         
Lorem ipsum dolor sit amet, consectetuer dipiscing
 elit. Cum dis parturient montes, nascetur ridiculus mus. January 1, 
2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum dis 
parturient montes, nascetur ridiculus mus. January 1, 2002 
            
            

              
Footer
          
     
[/code]

2. Css Code

Now we create css code:

[code lang="css"]
/*style two column layout*/
*{margin:0; padding:0;}
body
{
font-size:100%;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
}
* html, body
{
height:100%;
min-height:100%/*firefox*/;
}
[/code]
[code lang="css"]
html,#page
{ 
margin:0;
padding:0;
height:100%;
}
#page
{
 margin:0 auto;
 padding:0;
 width:1009px;
 height:100%;
}
[/code]
[code lang="css"]
a{text-decoration:none;}

a:hover{ text-decoration:underline}

ul,ol,li{margin:0; padding:0;}


h1,h2,h3,h4,h5,h6
{
margin:0;
padding:10px 0 0 20px;
}

h1{font-size:28px;}
h2{font-size:24px;}
h3{font-size:18px;}
h4{font-size:12px;}
h5{font-size:10px;}

p{margin:0;
line-height:18px;
padding:0 0 10px 20px;
font-size:12px; 
}

#page
{
 margin:0 auto;
 padding:0;
 width:1009px;
 height:100%;
}

#header
{
margin:0;
padding:0;
width:100%;
height:151px;
display:block;
background-color:#eeeeee;
}

#sidebar
{
float:left;
margin:0;
padding:0;
display:inline/*internet explorer*/;
width:200px;
height:100%;
background-color:#cccccc;
}

#sidebar ul
{list-style-type:none;}

#sidebar ul li{ display: inline/*internet explore*/;}

#sidebar ul li a
{ 
padding:3px 4px;
display:block;
margin:0px 0 0 16px;
text-decoration:none;
color:#0000E8
}

#sidebar ul li a:hover
{color: #CC0000} 

#main
{
margin:0;
padding:0;
float:left;
display:block;
width:809px;
height:100%;
background:#dddddd
}
#footer
{
margin:0;
padding:0;
display:block;
width:100%;
height:50px;
background:#eeeeee;
overflow:hidden;
}
[/code]

finaly we are done. We have created a simple 2 column css layout.Click here to see the example