Layout Page

The header is essentially a stylized <h1> block that sits inside the <body> (bordered in black) but above the <div> that contains the primary content (bordered in brown). I put a background image in the <h1> block to give the site a "sound wave" theme. The image needs work.

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.
Outside the content container <div> are two more blocks, a bottom navigation menu and an address bar, both bordered in orange.
The bottomnav bar is another unordered list of links, this time stylized to lie on the page horizontally. I only left a few in this demo

The address bar is another block outside the content container, but, naturally, inside the body.

E-mail from the Contact Page
This page last updated: Monday, July 10, 2006
A Metastable States' web site