• Article Written 
  • on 03.07.2009
  •  at 12:01 PM
  •  by admin

How to Create Css Three Column Layout

This is a tutorial on how to use CSS to create a simple three 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.

three-coloumn-css-layout
Strep first : we create a basic html structure

[code lang="htmlstrict"]

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum placerat purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum placerat purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, Readmore

Services

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum placerat purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum placerat purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, Readmore

Contact Detail

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum placerat purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus. In interdum placerat purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, Readmore

Copyright © Developer's Paradise Designed By Developer's Paradise
[/code]

Second step: we create a basic css structure

[code lang="css"]
*{ margin:0; padding:0;}

h1,h2,h3,h4 {
font:100% "Georgia", Times New Roman, Times, serif;
color:#fff;
text-transform:uppercase;
letter-spacing:2px
}

h1 {
font-size:400%;
text-align:center;
padding:35px 0 0 0;
}

h2 {font-size:150%;}
h3 {font-size:137%;}
h4 {font-size:120%;text-align:center; color:#848484;}

ul,ol,li {list-style-type:none;}

a {text-decoration:none; color:#00CCFF}

a:hover { text-decoration:underline;}

p {
color:#fff;
font-size:12px;
font-family:"Georgia", Times New Roman, Times, serif;
color:#fff;
padding:0 0 10px 0;
line-height:22px;
}
[/code]

[code lang="css"]
body {
font:100% normal "Georgia", Times New Roman, Times, serif;
background:#191919;
}
[/code]

[code lang="css"]
#page { 
background:#323232;
width:971px;
margin:0 auto;
height:100%;
border-left:1px solid #353535;
border-right:1px solid #353535;
padding:12px 0 12px 0;
}
[/code]

[code lang="css"]
#header {
margin: 0px auto 0 auto;
width:943px;
background:#222;
border:1px solid #424242;
}

#sub-header {
margin:1px;
padding:1px;
background:#333;
overflow:hidden;
height:150px;
}
[/code]

[code lang="css"]
#nevigation {
margin: 5px auto 0 auto;
width:943px;
background:#222;
border:1px solid #424242;
}
#nevigation ul {
margin:1px;
padding:0px;
background:#333;
overflow:hidden;
}
#nevigation li {
display: inline;/*ie*/
}

#nevigation li a {
float:left;
margin:0;
padding:7px 10px;
display: block;
color:#fff;
text-transform:uppercase;
letter-spacing:2px;
}
#nevigation li a:hover {
background:#424242;
text-decoration:none;
color:#00CCFF;
}
[/code]
[code lang="css"]
#content {
width:943px;
margin:5px auto 0 auto;
background:#222;
border:1px solid #424242; 
}

#sub-content {
margin:1px;
padding:1px;
background:#333;
overflow:hidden;
}
[/code]
[code lang="css"]
#column1 {
width:302px;
background:#424242;
margin:0 1px 0 0;
padding:5px;
float:left;
}
#column2 {
width:302px;
background:#424242; 
margin:0 1px 0 0;
padding:5px;
float:left;
}
#column3 {
width:303px;
background:#424242;
margin:0;
padding:5px;
float:left;
}
[/code]
[code lang="css"]
#bottom {
width:943px;
margin:5px auto 0 auto;
background:#222;
border:1px solid #424242;
}

#sub-bottom {
margin:1px;
padding:20px 0 0 0px;
background:#333;
overflow:hidden;
height:50px;
color: #fff;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
} 
[/code]

Finally we have created three column css layout. View Example and Download this file.

I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below…

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,