Here are links to the template demos. I'll plan to put zipped versions of these once their finalized:

Liquid Layouts

Fixed-Width Layouts

Update 02/09/06: I fixed a small bug for IE5/Mac, so now these layouts should now all work in that browser.

This site will feature several CSS layout templates for CHNM staffers to use web design projects. The templates are desiged with flexibility and simplicity in mind. Each template consists of five files: index.php, styles.css, typography.css, color.css, and layout.css. Except for a few slight modifications, style.css,typography.css, and color.css are all the same. Index.php and layout.css have additional code depending on changes in content. I'll write further documentation on the structure of these templates and strategies for modifying them for individual project needs.

While this method of using multiple stylesheets may seem redundant, I feel that it allows for easier management of sites by people with only a basic understanding of CSS. In addition, I find it’s much easier to maintain a site because styles are much quicker to find and edit, and few conflicts in the CSS occur.

The only major difference in the layout.css is that, in the liquid-width layouts, the width attribute for the body tag is omitted and the margins are set to { margin:20px;}. In contrast, the body declaration in the fixed-width style sheets is {width: 780px; margin:20px auto;} At this point I've found that its more flexible to set the width of the body in the CSS, instead of a wrapper div. Plus, using the body style declarations to make a centered layout makes the usual {text-align:center;} that comes with most centered layouts obsolete.

In any case, have a look at the CSS for these different layouts. I'm currently testing them in as many browsers as I can in an effort to make these work as universally as possible. When these are finalized I'll write up more documentation on how they work so that staff members new to CSS can better understand the techniques and approaches used. If you have any questions or run into browser issues, feel free to send me a note or IM me (jboggs22).

These templates have been tested on the following browsers:

Macintosh OS X

Windows XP