CSS can be far more advantageous than using tables especially if you want to create a liquid layout that will expand or contract to fit your visitors monitor width regardless of their monitor size. Also a major advantage of CSS is that if you keep the content away from the layout commands then this means you will easily be able to apply the same layout to not just a single webpage but to an entire website or design.
Laying out your pages
To repeat, the main aim in using CSS is to separate content from the formatting and style rules.
Logically chosen sections of your page need to be divided into div elements and these div elements should be placed in a sensible order ie. the title at the top, then the main content then possibly a sidebar. You need to use header elements (h1, h2,etc.) in a consistent manner in order to prioritise and most importantly to identify the information on your page.
The Box Model
In effect CSS tends to treat every element on your webpage as if it is enclosed in an invisible box. This box is made up of a content area, the surrounding space (padding), the outside edge of the padding (border), and also the invisible space surrounding the border (margin). You are able to gain considerable control over your webpage layout by using CSS to determine both the position and also the appearance of each element box. There are four main methods by which you can position an element box
a: you can leave the box in the natural flow (the default - often also referred to as static)
b: you can remove the box from the flow and instead specify exact coordinates either with respect to its parent element (absolute) or the browser window (fixed)
c: you can move the box in terms of its default position in the flow (relative)
d: should the boxes overlap each other then you can specify the order in which you would like them to do so and this is known as the z-index.
When you've determined the boxes position, you can control its appearance including such elements as padding, order, margins, alignment, size, colour etc. Occasionally you will find that some of the layout properties particularly those of em and percentage values will depend on an elements parent - the parent being the larger element containing the smaller element.