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;}
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.
