Position and Layout with CSS

This is Part III of a four-part unit:

  1. Part I — Principles and Concepts Underlying CSS
  2. Part II — Using CSS for Styling Your HTML
  3. Part III (this document) — Using CSS for Positioning Document Elements
  4. Part IV — Handling Browser Idiosyncracies

For years web designers used HTML tables to position elements of a web page where they wanted them. It worked after a fashion, but not well — tables were intended for presenting data values in a table format, similar to a spreadsheet, NOT for positioning page elements. As monitor screens became larger and resolutions became finer, it became clear that HTML tables just weren’t versatile enough for positioning. Changing one’s browser resolution meant a good chance that the web page design would “break”, as the designer had usually not accounted for all possibilities.

By reasonable use of the div and span HTML tags along with the id and class attributes, a web designer can set up the positioning of the components of a web page to account for almost any size or configuration that a user might want,

Readings on Positioning and Layout (by no means complete; this is just some of the most critical ideas)

General layout concepts

Specific layouts and issues

Back to Part 2 — Styling Your HTML

On to Part 4 — Browser Issues