CSS Fascinates Me - Page Layout
Wall Script
Saturday, August 23, 2008

CSS Fascinates Me - Page Layout

My friend Pratap asked to me how to design a simple CSS layout for blogger. I published this post for him

Design layout and CSS code

Before you proceed, it's useful to have an idea about page's sections.

Copy and paste this code into style.css file:

/* ------------------------------
------------------------------ */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
/* main part */
#main{width:auto; display:block;}
#main_left{width:560px; margin-right:20px; float:left;}
#main_right{width:200px; float:left;}

div.spacer, solve an issue with #container height
in css 2 column layout.

div.spacer{clear:both; height:10px; display:block;}
/* Footer part */#footer{width:auto; display:block; height:24px;}

The basic page structure is ready! In the next lesson we will format index.html file, adding layer using style.css file.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


Make in India