"maintext" Header

I designed this all-CSS layout to be simple to maintain, easy to load even on older machines, independent of any particular editing software, and, I hope, still attractive.

Everything in the body of the page (edit the header and banner at your own risk, if you know what you're doing) happens in just five tags. Every "databox" is a DIV tag inside the DIV "mainframe." Each "databox" has a DIV header with two class names: either class="databox maintext" (like this one) or class="databox narrow" (which is half the page width). For small stuff (preferably kept to the bottom of the page, to hide ragged edges), you might leave just "databox," but I do not recommend this!

Inside each "databox" DIV we should find one (maybe more, but probably better to keep one per "databox") header, marked by H2 tags. These produce the green-backgrounded titles.

The text in each "databox" should be properly enclosed in P (paragraph) tags. This helps ensure uniformity throughout, and also makes things prettier inside the boxes (trust me: you want to do this). You can also add any other inline formatting you know how to use, such as UL or OL or DL, or TABLE if you need a chart.

Finally, any picture you want on the site should be in an IMG tag inside a "databox" DIV. For best results, I would advise you *not* to put your IMG inside the P (paragraph) tags. All images are styled to float right, so if you want the IMG to be flush with the header (H2), put it before it.

"narrow" Header

This is an example of a "databox narrow" DIV. I won't type a lot in here, just enough to make it wrap once or twice. Fourscore and seven years ago, our fathers brought forth on this continent a nation conceived in liberty and dedicated to the proposition that all men are created equal. Now we do CSS and wonder why Microsoft has so much power, and why the Middle East won't quiet down.

Narrow box with image

Here is an example of how to make a nice, neat box with an image tucked inside. For best results, actually size the image to fit (try PixResizer) but *also* specify the width (or height) in CSS. I haven't forced the width in the stylesheet, but you might want to do it inline using style="width:200;" or some such.

Narrow box with image

Here is another example of how to make a nice, neat box with an image inside. In this case, I didn't put the IMG before the H2. Notice how it is now associated with the text, rather than the title. In some cases, this is what you want (an illustration of a paragraph in the text). In more cases, on this type of website, you will have a small picture (perhaps iconic, or like the officer profile photos) tightly associated with the title.