• Article Written 
  • on 16.06.2009
  •  at 08:27 AM
  •  by admin

Simple 2 column css layout

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"]

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

[/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

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,