I now have a header div (outlined in red) that contains a div for the logo (outlined in violet) with a header (outlined in orange next to it. The logo div has the logo image set as a background graphic in the style sheet. This way it will persist throughout the whole web site. I can change my logo and will have only to change to style sheet to make the change persist.
The so-called "content container" is purely a device for centering things on the page. It is necessary because of a bug in IE 5, which is still used by about 5% of the population as of 2006. Inside the content container, we have a navigation bar on the left (outlined in green) and a "right container" (outlined in blue) and a "news" bar on the right (outlined in green).

Hot News!

The hot news here over on the right, is a place where I could put ads or further navigaton aids, or even quick links to downloads or something. It and the nav bar have a width fixed in ems so that if one resizes one's font size, the box will "breathe" with the resizing. That keeps things from looking too weird.
The sole purpose of the right container is to keep the main content (inside the lime box) centered in the available space to the right of the navigation bar and to the left of the "hot news" section. This is another accomodation for an IE bug. Actually, it's not so much a bug as a lack of standards compliant features.
The primary content goes inside the "center content" div (outlined in lime). In a small screen it will stretch to be the size of the right container. In a larger screen, it will have a fixed width and be centered in the right container. IE has a strange bug that would cause this content to disappear completely should I fix the center content so that it was too large to fit inside the right container. So to keep this from happening and to keep things from looking otherwise funny, I had to make up my dynamic style sheet switcher that sizes things based upon one's screen resolution.
The purpose of the horizontal rule is to make sure we've cleared the navigation bar should the main content be minimal. In a good browser, the horizontal rule won't show up. In IE it does and therefore, makes things uglier. I'll put up with some ugliness so that I don't have to do (and later undo) hacks to accommodate IEs outdatedness.
Below the content container block, we have a bottom navigation division. This is again an unordered list, but this time styled to be horizontal.
Below the bottom navigation block is the address block. I think it important that people be able to send me nasty e-mails if anything I say pisses them off. Then too, once or twice, a family member found my e-mail address by this address bar. I'm pretty sure my spam problems come from other issues. I've used numerical character references and some javascript to munge my e-mail address and thereby, I hope, foil spambots.
© 2003–2006 by Lawrence G. Piper
e-mail me: larry@lgpiper.net
Or use my contact form

Last update: Wednesday, July 11, 2007
The whole thing is wrapped in the body element, which is outlined in black.