The navigation bar, which is bordered in green, floats to the left of the main container. It has a width of 10 em. The links are an unordered list which I then stylized to look like buttons. Obviously, this example just shows one link.
The content is centered by means of a "right container", which is bordered in blue. This container has no content of its own. It just holds the <div> that contains the actual content. Its primary purpose is to make sure the content stays centered on the right-hand portion of the screen, i.e. centered in the block to the right of the nav bar. For most browsers, I can use the margin:auto property for the content <div> (the red-bordered block below) for the centering. For IE5, I had to put text-align:center in this "right container" <div>. Technically, it is an incorrect use of styles, but it works.
The actual content, which is bordered in red, is inside a <div> that is fixed at a width of 33 em. This is done to keep the content lines from being too wide to read comfortably on high-resolution monitors. Ideally, I would use a variable content width using the min-width and max-width properties. Unfortunately, IE doesn't support those properties, so I decided to use a fixed-width compromise.
After the right container block ends, there is a horizontal rule (violet) which ensures the content container is long enough to enclose the floated nav bar, i.e. it has a "clear" property associated with it.