A Simple Two Column Layout.
Step 1 - No styling yet - this is the default layout. In this example, we are going to use absolute positioning to create a two-column layout, which is perhaps the most common page layout you will see on the Web. This format enables you to follow the widely adopted convention of placing navigation in a vertical "stack" on the left side.
The content area - the second column - is typically much wider than the navigation column, as this is where the real infomation of the page goes.
The most important decision in a design like this is: will one, both or none of the columns change size to fit the width of the browser?
In this case, we'll fix the width of the navigation column and let the content column fill the rest of the browser's width.
Step 2 - the two divs are now aligned vertically. The navigation div (with its right border in red so you can see where it is) has been absolutely positioned so it is removed from the flow of the document.
As an absolutely positioned element, its default position is in the top left corner of its containing element, the body element.
This allows the content div to take its place as the first element in the document flow.
Step one and step 2 are taken from the assignment in the stylin' book. The styles are embedded in order to make it easier for someone learning how to do this to study the css and see how this page is set up. I have used the xhtml strict dtd here on this page.