a little bit of everything

An easy way to change your html layout from table to css/div for those who still using “old school html table layout”

First, let’s look at the table:

HTML code

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:

It looks the same as table, now let’s see the code.

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!