This blog has moved here: | FOLLOW ME ON TWITTER @woork
Sunday, October 7, 2007

Design page layout using CSS

Today's lesson will explains how to design page's layout for your site using a css file. In the previous lesson we have seen a typical website structure which we can use to project our site. In the css folder create a new css file called default.css where insert the css code to design the page's elements.

Now, open index.php and put this code into <head> tag:

<link href="css/default.css" rel="stylesheet" type="text/css" />

In this way index.php will get all informations about the page's design from the CSS file default.css

Page layout and CSS code
Before you proceed, it's useful to have an idea about page's sections. I suggest to use this layout (2 column fixed size):

Copy and paste this code into default.css file:

/* ------------------------------
------------------------------ */

#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 basic page structure is ready! In the next lesson we will format index.php file, adding layer using default.css file.

Related Posts
Optimize CSS files to improve code readability

blog comments powered by Disqus
Kano said...

Good work and nice design for this blog!

Antonio said...

Thanks for your comment :)

Emma said...

Ola Antonio, very usefull post!

Ying Xiong said...

This helps me a lot! Thank you!

Anonymous said...

Thanks for the help in showing others what you know. Much appreciated

Anonymous said...

this is best updated css from the web, I learn a lot from the example, thanks for the sharing such knowledge with us !!!.

Yi Mao

geeth said...

thanks for sharing.. very helpful.. keep posting

lil.D said...

Thanks a lot, So nice tutorial

Chris Hale said...

#column_right{width:200px; float:left;}

should be

#column_right{width:200px; float:right;}

Anonymous said...

Love the pencil drawing layout and labeling! Thanks and many blessings!

mahender said...

This kind of exampls every one can learn css and html

Anonymous said...

I don't get it.. CSS file? Where? How?

szita said...

Thanx. Love this blog!

pong- said...

That very good of tutorial! Thank you.

wantedwahab said...

I like your sketch style

where is the next lesson ?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News