Layout methods used in Zen's CSS

Last updated on
7 December 2017

The CSS layout method used in the core Zen theme is based on the mostly undocumented “Zen Columns” layout method. The theme developer can use a liquid layout or fixed-width layout that is extremely flexible and has source-ordered XHTML, meaning the main content comes before anything else in the XHTML source, but does not necessarily come first in the visual display of the page.

The parts of the page are placed in the XHTML in the following order:

  1. Header
  2. Content
  3. Navbar
  4. Left sidebar
  5. Right sidebar
  6. Footer

But the page will visually appear to be presented to the user in the following order:

  1. Header
  2. Navbar
  3. Left sidebar
  4. Content
  5. Right sidebar
  6. Footer

Since the content is placed near the top of the XHTML source, both accessibility and search engine optimization will be greatly improved.