Continuing on our quest for great layout tips, our next recommendation comes from yours truly:
CSS page layout basics
This article takes you through the A-Z of what makes up a basic CSS layout. It also shows you how to use some of the CSS layouts that come packaged with Dreamweaver.
Here’s one from Dreamweaver veteran Gary White: Layout 101
This resource contains some outdated information (about Macromedia Dreamweaver!) but some of the basic concepts around CSS layout are still relevant and clearly presented. Useful for total newbies!
We get a lot (and I mean A LOT) of queries about CSS layouts — what are they, how do they work, where do I go to start? Here are just a few of some of the best resources out there if you are trying to tackle this formidable but popular beast:
From table-based to tableless web design (ADOBE)
Popular two-part tutorial series on building a CSS layout from scratch, and converting table-based layouts to pure CSS.
CSS page layout basics (ADOBE)
Explanation of a basic CSS layout that breaks down the structure and rules that create the layout.
Creating a CSS layout from scratch (SUBCIDE)
An older but still quite useful step-by-step tutorial on creating a CSS layout.
Building your first CSS site (ADOBE)
Steps beginners through the process of defining structural elements and then styling them.
Tableless layouts with Dreamweaver CS4 (ADOBE)
Shows you how to create a simple two-column CSS layout.
Creating a simple three-column design (ADOBE)
Shows you how to build a three-column design, including using the “faux column” technique
Dreamweaver CSS starter layouts (ADOBE)
An article written for Dreamweaver CS3, but still useful as the starter layouts did not change in CS4.
Create a page with a CSS layout (ADOBE)
The Dreamweaver CS4 Help doc equivalent to the above starter layouts article.
CSS layout (HTML SOURCE)
A popular article describing many of the most common terms and principles used for CSS layouts.
In Search of the Holy Grail (A LIST APART)
Elegant article on creating the “holy grail” of CSS layouts: the three-column, fixed-width sidebars, liquid center layout.