While looking for an easy-to-use framework/starting theme for my websites I learned that Zen was one of the most popular choices in the Drupal community, but I could not understand how the content and sidebar columns worked with negative right margins. It took me a few minutes to realize that while the width is specified in the CSS, the math between margin-right and margin-left needs to match it in order to have well positioned columns.

This post only applies to designers who wish to understand how Zen works and/or wish to position columns in a different configuration.

This concept is better understood if you think in layers. Imagine the left sidebar is on the left edge with a width: 200px and margin-right: -200px. Now imagine the content column is 560px wide with margin-right: -760px (sum of left sidebar and content column widths) and margin-left: 200px (the width of left sidebar), now 760-200: 560px which is exact same width of this column. The right sidebar is 200px wide with margin-right: -960 (sum of left sidebar, content column and right sidebar widths) and margin-left: 760px (the sum of left sidebar and content column widths) so when you subtract 960-760: you end up with the same width 200x. It is almost like a mold or puzzle that provides a foolproof arrangement of CSS columns.

I used the original CSS of Zen for Drupal for this example and the screenshot was modified to resemble Zen's CSS file.

Got it? Now go ahead and move your columns arounds and spread the knowledge.