Other CSS Designs

The Edina Chorale

www.edinachorale.org
The Edina Chorale is dedicated to the study and performance of the best in choral music.
The site features a header, fixed left column, relative right column (set to a maximum width) and a footer that maintains a fixed position at the bottom of a page.

States Electric

www.stateselectric.com
States Electric Manufacturing Company specializes in the fabrication of custom metal products and the design and fabrication of electrical distribution equipment.
The layout for this site uses relative sizing, and is bounded by a header and footer.

Coon Rapids Marching Cardinals

www.marchingcardinals.org
The site of the Marching Band at Coon Rapids High School in Minnesota; developed and maintained for the band boosters.
This is a relative sized, 3-column layout.

HTML & CSS

This revision of worqx.com was designed to comply with W3C recommendations and be both usable and accessible; using valid XHTML 1.0 Transitional and Cascading Style Sheets (CSS) for presentation layout and design. The site should work in IE 5.0+ , Firefox, Opera, Safari, and Netscape 7.2+. (It's a little flaky in Opera 7; if it doesn't work in one of the current browsers, I'd really appreciate a note: janet @ worqx.com.) Older browsers like Netscape 4+ have been accommodated by hiding the layout portions of the style sheet, but the content is still available.

The relative layout is achieved with floats and relatively positioned elements:

The page quote is contained in a div with text-align set to right.
The header block element uses a repeating background image containing a right-floated unordered list which holds the global navigation links. Anchor height is achieved in the list elements by display: block & top padding.
The various site-section colorways make use of a class on the body tag - various colors are maintained on different page elements due to the style cascade.
Left and right side sections are floated left & right fitting into the main content area margins.
The footer clears all the floats, and then mimics the main content margins.
View the style sheet: base.css & layout_styles.css

Things I like about the layout: The layout holds its own pretty well when text size is increased or decreased, any column can be longest so the footer maintains its proper place, & it looks about the same in all the various browsers.

Disappointments & frustrations: Extremely small window sizes could be problematic as some content elements can overlap, in Opera 7.2, the main navigation links stack at the right side of the page & I haven't found a work-around for that as yet—I'm still looking.

If you have comments or suggestions, send me a note!

If you're interested in CSS design, investigate the links listed on the Links, blogs, wikis, and other resources page.