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.
Strep first : we create a basic html structure
[code lang="htmlstrict"][/code]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
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…
is this cross browser compatible?
perfect 🙂
can i create menu using values from database like all categories while appear on first level and on mouse hover of category aall appropriate sub category will be showed can u help me please..