This post explains how to design an HTML/CSS basic structure to design a simple three column fixed page layout
I included some standard elements such as logo, top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads so you can reuse quickly this code on your webdesign projects.
HTML structure
The following picture illustrates HTML/CSS elements I added on the page:
The structure is ready to use. You just have to redefine font, color background, font-style for each layer and HTML tag, and define other custom classes.
Download the source codeStep 1: HTML file structure
Create a new page and copy and past this code within <body> tag:
<div id="container">
<div id="topbar">Top Bar/Logo Layer</div>
<div id="navbar">
<div id="main">
<div id="column_left">
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id="column_right">
<h3>Categories</h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id="column_right_adsense">
<h3>AdSense</h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">© 2008 Information about your site</div>
</div>
<div id="topbar">Top Bar/Logo Layer</div>
<div id="navbar">
<a href="index.html?home">Home</a>
<a href="index.html?about">About</a>
<a href="mailto:myemailaddres@email.com">Contact me</a>
</div><a href="index.html?about">About</a>
<a href="mailto:myemailaddres@email.com">Contact me</a>
<div id="main">
<div id="column_left">
<h1>Post Title</h1>
<h2>12 january 2008</h2>
<p>Add your text here</p>
</div>
<div id="column_right">
<h3>Categories</h3>
Right Content to add Categories, web 2 widget (twitter, mybloglog recent readers...)
</div>
<div id="column_right_adsense">
<h3>AdSense</h3>
Adsense 120 X 600
</div>
<!-- Don't remove spacer div. Solve an issue about container height -->
<div class="spacer"></div>
</div>
<div id="footer">© 2008 Information about your site</div>
</div>
Step 2: CSS file
Now, create a new css file and link it into index.html
/* ------------------------------
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}
a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container{width:780px; margin:0 auto;}
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/* Add here your custom classes ... */
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}
a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#main{width:auto; display:block; padding:10px 0;}
#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}
#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/* Add here your custom classes ... */
Save all and try it!
I am 
Nice one, I am using it for my website, but I wonder if it is possible to set the left column to be fluid?
Great Article.
Helped me improve my CSS knowledge. Now I can seriously set about creating my own CSS layouts instead of relying on automatic layout generators and not knowing how to customise the generated layouts!
Thanks!
LBLOGIC
Very close to what I need - but I cannot get it to work in IE6; the whole block seems fixed on the left. Also, if I want a margin to the right to the right hand block, then doing this:
#column_right{width:160px; margin-right:20px; float:left;}
works in FF but not IE6.
hi..i have quite same problem as "DRH", i can't get it to work in IE7. It's working well in FIrefox but in IE7 all block are on the left.
ANyone can help me? thanks a lot in advance.
coool
hi! is it possible to open a link into a DIV????
WOw nice, but i usually wrap column_right and column_right_adsense into a container_div and set float:right.
Which one is better? maybe you have list of pros and cons using another technique ? :P
Thanks You its really nice and simple,
Could I ask why everything is set to display block?