You might still be using table for creating your web design but the new Web 2.0 has brought in the amazing concept of table less designs that are much easier to code and runs smoothly across all the browsers. You don’t have to go through fuss of maintaining the table structure in each single web page. Simply create a style sheet with all the classes and IDs you can use it across the web site.

There are several steps in creating a layout based design. To get an exact result according to your design you need to define the classes and ids before hand that will make up the webpage. In the first step you need to create a container div that will hold everything of your layout. This will help keep things like headers and footers in line with everything else. Here is an example of a container div:

#container {
Width: 700px;
}

The width and height does not need to be in pixels. You can also use ems or percentage to define those parameters. Besides that you can also include attributes like color, background image or color, border and many other common attributes in the div itself. This will become your global settings and go along each and every page of your web site,

Within the HTML container div, insert a div for the content column and a div for the sidebar column.   This will help you to have content load first in the webpage and image loading afterwards. Now if you want to load the content on the left then you need to define the attribute as following in the di:

#content {
Width: 65%;
Float: left;
}

Following this way you can go on creating different parts of the webpage and then later call the ids on a single page to get a stander version of HTML page. Be sure to use classes and ids properly without any miss-spell as this will break the webpage and create clutter on the site.