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

<div id="page">
           <div id="header">
           <div id="sub-header">
              
           </div>
           </div>
           <div id="nevigation">
                   <ul>
                      <li><a href="#">Home</a></li>
                      <li><a href="#">About us</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">Products</a></li>
                      <li><a href="#">Sitemap</a></li>
                      <li><a href="#">Contact Us</a></li>
                  </ul>
           </div>
           <div id="content">
                 <div id="sub-content">
                 <div id="column1">
                 <h2>About Us</h2>
                   <p>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, </p>

                  <p>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, <a href="#">Readmore</a></p>
                 </div>
                 <div id="column2">
                 <h2>Services</h2>
                   <p>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,</p>

                  <p>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, <a href="#">Readmore</a></p>
                 </div>
                  <div id="column3">
                 <h2>Contact Detail</h2>
                   <p>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, </p>

                  <p>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, <a href="#">Readmore</a></p>
                 </div>
               </div>
            </div>
             <div id="bottom">
                  <div id="sub-bottom">
                  <span>Copyright &copy; Developer's Paradise 
                   Designed By Developer's Paradise</span>
                  </div>
               </div>
     </div>

Second step: we create a basic css structure

*{ 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;
}


body {
font:100% normal "Georgia", Times New Roman, Times, serif;
background:#191919;
}


#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;
}


#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;
}


#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;
}


#content {
width:943px;
margin:5px auto 0 auto;
background:#222;
border:1px solid #424242; 
}

#sub-content {
margin:1px;
padding:1px;
background:#333;
overflow:hidden;
}


#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;
}


#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;
}

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…

Filed under: Css, Tutorials by admin