One of the most widely used design techniques in CSS is called grey boxes. Grey boxes are simple layout sketches created with Photoshop (or another similar program) where you simply draw the basic layout structure of your web site. In this phase it's not necessary to add graphics, text or other widgets. All you need is the underlying skeleton of your CSS project. Grey boxes are a must if you want to build a flexible, scalar and reusable layout from scratch. In fact, you can reuse your sketches in many other projects.
For example, here's an hypothetical sketch that makes use of grey boxes:
Numbers on each layout component can be associated with a particular CSS nomenclature. For example:
You can also associate dimensions with your components. For example, you can say that #1 has a width of 100% and #4 has a width of 62%. Further, you can also add more grey boxes within your already-defined components in order to better define all the layout details.
Grey boxes should always be the first stage of a layout design. Further stages involve the use of text and graphics. I recommend you to save your grey boxes templates to be used in other projects which show similar layout features.