Conceptual design for site's layout

This post explains how to organize the HTML code to design index.php page's layout using the default.css file

Step 1: HTML code

First step, we create a file called index.php in the site root; in the previous post we have added a link to CSS file (default.css) in the index.php head tag and now, we use it to create the page's layout structure wich will be like this:



All pages will be loaded into main section using URL variables. Open index.php and copy and paste this code into the body tag:



Step 2: CSS file

Copy and paste this code into default.css file:

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_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{width:auto; display:block; height:24px;}

The graphic result will be like this:



Now, our site structure is ready to be completed adding other elements that we will see in the next lessons.

by woork.blogspot.com