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:

<div id="page">
   <div id="header"></div>
   <div id="sidebar"></div>
   <div id="main"></div>
   <div id="footer"></div>
</div>


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

<div id="page">
    <div id="header">
       <h1>Company Name</h1>
       <h4>Type your slogan</h4>
    </div>

         <div id="sidebar">
            <h2>Navigation</h2>
                           <ul>
                                  <li><a href="#">Home</a></li>
                                  <li><a href="#">About us</a></li>
                                  <li><a href="#">Srevices</a></li>
                                  <li><a href="#">Contact</a></li>
                                  <li><a href="#">Sitemap</a></li>
                           </ul>
         </div>

              <div id="main">
                    <h2>Content</h2>
                 <p>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 </p>
            </div>
            <div id="footer">
              <h2>Footer</h2>
          </div>
     </div>

2. Css Code

Now we create css code:

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


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


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

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

Filed under: Css, Tutorials by admin