CSS Positioning

The table-based approach to layout that you learned in 320/741 (or on your own) was cutting edge back when David Siegel pioneered it back in 1997. But browsers have come a long way since then, and markup has evolved to match that.

Using tables for layout has two major problems. The first is that it ties together content and presentation, which are two components that are best left separate. The second is that it results in bloated, slow-loading code.

We'll discuss the importance of separating content and presentation, as well as the specifics of the CSS box model and cross-browser challenges for CSS-based positioning.

Readings on CSS Positioning

• Chapters 10-12 of Designing With Web Standards (pages 235-297)
• Bill Merikallio: Why Tables for Layout is Stupid
• Brainjar: CSS Positioning
• a list apart: Flexible Layouts with CSS Positioning
• Webreference.com: Advanced CSS Layouts, Step-by-Step
• The Noodle Incident: CSS Box Lessons

CSS Positioning: In-Class Exercise

Using the commandments example I provided in class, create your own page with CSS positioning and formatting. You can change as much or as little of the original as you'd like, but make sure that you've got a good sense of how the positioning properties work.

When you're done, upload the file to your rit.edu web space on Grace, and add a weblog entry that points to it and describes what you changed and anything important you'd like to remember about how you created the page. If you don't already have a category for in-class exercises, make sure you add one to your weblog, and assign it to this entry.