CSS layout can be somewhat tricky but can also be far more versatile than that of a table structured layout. If you can narrow down your design to have a full seperation of design and structure then the possibilities become endless.
The most important concept to grasp when dealing with CSS Layout is the the "Box Model."
The CSS Box Model simply defines how elements are rendered as boxes in the browser. The most common are Block, Inline, Float, & Absolute.
Block elements by default flow vertically in an HTML document and stretch 100% of the width of their parent container.
Inline elements by default flow horizontaly from left to right and then wrap to a new line when they run out of horizontal space in an HTML document. Inline elements stretch ony to contain their contents.
Float elements can float to the left or right and indent content around the floated object itself. Floated elements, like inline elements, only expand their width to their contents by default.
Absolute elements are put on a layer above their containing elements and positioned relative to their closest positioned containing element. Absolute elements, like floated and inline elements, only expand their width to their contents by default.
It is important to understand the relationship between padding and margin when it comes to the box model. Padding is space added as a cushion inside of a container:
<div style="padding: 10px; background-color: red;">
<div style="background-color: yellow;">Sample Text Here</div>
</div>
Would render as:
The red area represents the padded space inside box.
Margin is the outer space between boxes:
<div style="margin: 10px; background-color: red;">
Sample Text Here
</div>
Would render as:
Sample Text Here
In this case there is an transparent space of ten pixels surrounding the box.