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:
<body>
<div id="container">
<div id="topbar"> ...topbar content... </div>
<div id="navbar"> ...navbar content... </div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id="main">
<div id="column_left"> ...column left content... </div>
<div id="column_right"> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
</body>
<div id="container">
<div id="topbar"> ...topbar content... </div>
<div id="navbar"> ...navbar content... </div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id="main">
<div id="column_left"> ...column left content... </div>
<div id="column_right"> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
</body>
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;}
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.
5 Beautiful penstyle fonts(October 5, 2008)
The Daily Inspired Blogger template(October 4, 2008)
10 Beautiful icons set for web developers and designers (September 18, 2008)
10 Fonts to design original logos (September 5, 2008)
10 Awesome typewriter fonts for web designers (August 23, 2008)
10 Handwritten fonts you can't miss (August 12, 2008)