This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Thursday, January 10, 2008

Three column fixed layout structure using CSS

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 code


Step 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">
<a href="index.html?home">Home</a>
<a href="index.html?about">About</a>
<a href="mailto:myemailaddres@email.com">Contact me</a>
</div>
<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;}
#topbar{width:auto; display:block; height:60px;}
#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;}

#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!

blog comments powered by Disqus
Reno said...

Nice one, I am using it for my website, but I wonder if it is possible to set the left column to be fluid?

leftbrainlogic.com said...

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

drh said...

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.

Anonymous said...

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.

Hanush said...

coool

guif said...

hi! is it possible to open a link into a DIV????

Permana Jayanta said...

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

Anonymous said...

Thanks You its really nice and simple,

Tiffany said...

Could I ask why everything is set to display block?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News