Browsing the web for CSS related info often turns out to be a painful search through naive CSS glorification and anti table propaganda... :-/
So I always find it very refreshing when I stumble upon a more balanced article like Sitepoint's "Exploring the Limits of CSS Layout":
For better or worse, the vogue of Web design has evolved to favour a layout similar in style to a newspaper. Common design elements include:
- a header and footer that each spans the page horizontally
- content constrained by page width
- vertical scrolling is acceptable, within reason
- navigation and secondary content in vertical columns next to the main content
That last one is the real kicker. The sad reality is that the current CSS specificaton (CSS2) was not designed with multiple columns of content in mind. As a result, just as Web designers have always had to abuse HTML tables to achieve complex page layout, they must now abuse CSS positioning to achieve those same ends.
The article then does a good job explaining how CSS is usually absued to achieve such a layout.
The main problem arises when the main content is shorter than the sisebars. In that case, those sidebars will flow over the page footer. :no:
Sitepoint suggests using javascript to dynamically fix this. My own recommendation would be using float:left and float:right instead of absolute positionning for the sidebars. The page footer can then be constrained at the real page bottom by clear: both. It's damn too hot right now for me to detail this XX(, but you can see it in action at http://b2evolution.net/. You'll see plenty of pages with shorter content than the sidebar... and still displaying as expected.
Another benefit of the above technique over the absolute positionning described here is that is doesn't require the page header to have a fixed height. Sitepoint doesn't mention this problem but if your header is a combination of an image and text, you cannot predict it's height at different font sizes and thus, you do not actually know where exactly to absolute position your sidebars!
Anyway, I may be quite satisfied with my floating CSS... but it still comes down to sitepoint's point: it is dirty CSS abuse!