More CSS adventures

Candidate design for a personal page that serves as an English Department help and reference site.

Goal: create a fluid design with large formal components that slide within the view port, but maintain their veritcal relationships to each other, and, after a certain minimum distance is reached, their horizontal relationships, too.

The main remaining challenge is vertical extension on the left and right side bars. My original plan was to make them always flow to the bottom of the viewport, regardless of content length.

To create this layout, this page styles the following elements and DIVs:

  • BODY — sets left gray vertical sidebar under menu
    BUG: same values applied to #topleft don't produce alignment.
  • #body2 — creates fluid gray background under masthead
  • #bg — main container for menu, content, footer, etc., places bottom-right cup above footer
  • #topleft — places coffee cup w/brickred dot
  • #masthead — places graphic title and coffee stain and cup
  • #menu — sets width and background for lefthand menu
  • #contentbox — sets margins, width, and background for main content
    could handle menu extension by extending contentbox beneath and repeat gray graphic?
  • #content — not used right now, possibly will allow for extra borders or background, etc.
  • #rightbox — places small gray box underneath top-right coffee cup
  • #footer — sets borders, margins, etc., and gradient shading beneath footer