First, let’s look at the table:

Table Layout

This is Header




Main Menu
-Menu1


Content goes here!
This is content!

Looks simple and familiar enough, but is it the best? How about we change it into css/div layout.

The result:

Css Div Layout

HTML:

This is Header
Main Menu
-Menu1
Content goes here!
This is content!

CSS:

div#container{
	width:350px;
	margin:0 auto;
	background:#cccccc;
}
div#header{
	text-align:center;
	background: #eeeeee;
}
div#menu{
	width:100px;
	float:left;
	background: #999999;
}
div#content{
	width:250px;
	float:left;
	background: #cccccc;
}

Not as painful as you think? Now we combine them together.

1. Put css code under style tag in HTML head

2. Separate css code into .css file and create a like to it using tag

That’s it!