Yes, CSS should not be used for layouts...
<div id="container">
<div id="top">
Top
</div>
<div id="leftnav">
Left
</div>
<div id="rightnav">
Right
</div>
<div id="content">
<h1>Center</h1>
</div>
<div id="footer">
Bottom
</div>
</div>
However, like Ron Garret suggests, tables are a suitable alternative: Correct layout semantics, but poor (not incorrect, but poor) markup semantics.
| Top | ||
| Left |
Center |
Right |
| Bottom | ||
<table class="demo1">
<tr><td class="shaded" colspan="3">Top</td></tr>
<tr>
<td class="left">Left</td>
<td class="center">
<h1>Center</h1>
</td>
<td>Right</td>
</tr>
<tr><td class="shaded" colspan="3">Bottom</td></tr>
</table>
One more approach I'd like to add. You can make <div> elements behave like Tables. Correct layout
semantics, intuitive HTML layout, and better markup semantics. This example uses the table
and table-cell display properties which makes elements behave like a table element.
Find out more about the
table visual formatting model.
Another introduction
to display:table
<div id="table">
<div class="top shaded">Top</div>
<div class="main">
<div class="left cell">Left</div>
<div class="center cell">
<h1>Center</h1>
</div>
<div class="right cell">Right</div>
</div>
<div class="footer shaded">Bottom</div>
</div>
You'll notice--if you examine the source to this page--that the layout and CSS techniques for the last two examples are almost identical. My answer to "which one should I use" is "it depends". There's no right answer and usually more than one way to design the layout of a page, as I've demonstrated here.
This technique has been tested on Safari 3, Opera 9.6, and Firefox 3. IE8 allegedly has support, while IE6 likely doesn't.