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.
| 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 |
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.