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

2 thoughts on “Simple 2 column css layout

  1. Ionut

    where is the example? you forgot to show it. check other posts of yours too. they don’t have demo either

Leave a Reply

Your email address will not be published. Required fields are marked *