Below are some tutorials on the web on how to create the various CSS based tableless layouts.
There are two primary methods of creating CSS-based layouts.
a) The first is using absolute positioning. This method has the disadvantage of not easily knowing where the bottom of divs as they expand. Hence, having a footer that spans across all three columns in a three-column layout can be difficult. Although it can be achieved via Javascript techniques or worked around by having the footer only at the bottom of center column. Or so on.
b) The second method is using floats.
This is the method that is more well adopted and is definitely something you want to learn. It is more difficult to learn at first and requires a good understanding of floats and clears beforehand. But because of it ability to clear float, you do not have the footer problem as mentioned in the absolute positioning technique.
Douglas Bowman's presentation at Web World 2006 is a must see for anyone learning CSS layouts. Even those who have worked with CSS layouts may pick up a tip or two from the presentation. As he shows you a tour of his code for a three-column layout, you will find that he likes to use the "float everything" technique and the "opposing floats" technique. The main idea is that a container that is floated will automatically contain any floats within it. This method is nice because you do not have to worry about negative margins; you have control over source order; and it can be used for two-column or three-column layouts, as well as fox fixed and fluid layouts.
Div based layouts
