Zen: Negative Margins

If you are new to CSS layouts, negative margins might bewilder you. I am going to try and explain how Zen uses negative margins to accomplish side-by-side layouts. When you understand the formula, it becomes almost easy to use this approach anywhere you want to position divs next to each other.
Lets' start by converting CSS into a table. The table below takes three separate vertical CSS blocks and arranges them horizontally into a table so that you "see" the layout they are creating and so you can see how the values change to make the layout.
Default Zen Layout

CSS attributes
sidebar-left div
content div
sidebar-right div

float
left
 
left

width
200px
560px
200px

margin-left
0
200px
760px

margin-right
-200px
-760px
-960px

The formula for margin-right = width plus margin-left converted to a negative. The Zen CSS notes this. The rest of the formula has to do with calculating the margin-left value for the other divs. The formula for margin-left = sum of the previous div widths. So in our example, the sidebar-right has a margin left of 760px or 200px + 560px.
Let's see how the margin formulas work when different divs are active.

CSS attributes
sidebar-left
content

float
left
 

width
200px
760px

margin-left
0
200px

margin-right
-200px
-960px

CSS attributes
content
sidebar-right

float
 
left

width
760px
200px

margin-left
0
760px

margin-right
-760px
-960px

All Right Layout
More and more sites are experimenting with placing the sidebars next to each other on the right or on the left. The example below assumes that both sidebars are active on the page. Using the formulas, we get the following.

 
content
sidebar-left
sidebar-right

float
left
left
left

width
560px
200px
200px

margin-left
0
560px
760px

margin-right
-560px
-760px
-960px

With just the right sidebar active.

 
content
sidebar-right

float
left
left

width
760px
200px

margin-left
0
760px

margin-right
-760px
-960px

Now for the decision. If you only have a left sidebar active (no right), do you keep the empty space where the right is supposed to be? See example below. Your choice.

 
content
sidebar-left

float
left
left

width
560px
200px

margin-left
0
560

margin-right
-560
-760

This same approach can be used to position the site name -> next to the site slogan-> next to the search box. OR it can be used to position the mission next to the header-blocks region. Draw your div boxes, decide where they are in relationship to each other. Decide the width for each. Apply the formula. Here is some example CSS layout code.
Now that you have your groups of divs next to each other, you can start stacking them. Of course, you can stack and then align left and right but I started with the left-right objective because that was the most challenging to visualize.