CSS Fascinates Me - Page Layout

{ 2 comments }

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:

/* ------------------------------
PAGE STRUCTURE
------------------------------ */
#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.