It is true that it is easy to design layouts with CSS in comparison to the tables. But despite this, tables are still being widely used. This is due to the fact that the creation of columns with CSS is quite complex. Columns are essential for most of the sites that comprise of a middle column that contain the content with navigation links and ads on the two sides. Hence, this is considered as an unsatisfactory approach.

The Power of Float
Learning how CSS floats work is essential to work with the CSS columns. It allows some portions of the text to float near other parts that are not displayed underneath each other.

To create columns in CSS, it is important to separate the content from the navigations. This can be done using the following tags:

<div id="left-nav"></div>
<div id="right-nav"></div>
<div id="main-content"></div>

It is essential for the divs to be in the correct order, i.e. starting with left, right and center. The widths of the columns can be adjusted, either in pixels or percentage.

The Problem with Background
You will face a problem in case you want different background colors for the left, right and center columns. Most of the browsers consider columns to be extended only when the text contained in them extends. Due to this reason, the bottoms of the column do not line up.

To counter this, the best way is to create the fixed-width columns by specifying their width in pixels. Then, create one-pixel high image which includes the color that you want to have as the background. This image can be set as the background by tiling it.

The Problem with Header and Footer
CSS creates a problem in case you want to display header and footer separately from the columns. For this, you will need to give extra space to the navigation columns at the top and then also ensure that it doesn't reach below the main content.

To solve this problem, a CSS rule called 'clear' is used. This prevents anything from floating around the tags that you apply it to. Its possible settings are left, right and both.

Header and Footer have to be added before and after the other divs:

<div id="header"></div>
<div id="left-nav"></div>
<div id="right-nav"></div>
<div id="main-content"></div>
<div id="footer"></div>