Submitted by Pixel Chimp on Fri, 04/02/2011 - 22:42

Zen them layout structure with source code

Here is a quick reference post showing the basic structure of the Zen 2 Drupal theme, see the Zen project page for the source, and the project help.

Large version of the layout image.

Note: extra items are removed for clarity, but the source code overview should help see what is going on. The main point to consider is that Zen puts the page content first in the source code, and moves preceding content into place via floats & negative margins.

There is a similar layout example on Drupal groups for Zen v1. Also check out the Firefox view source chart addon.