Negative margins

Negative margins are used in so-called liquid layouts. In these layouts you want your content to take up all available horizontal space. In CSS terms: width: 100%. The problems start when you want a left sidebar of, for example 200 pixels. Now, if you want to float your content next to it, the content would be 200px narrower than before, so you would like to specify something like: width: 100% - 200px for your content. Unfortunately you can't.

If the sidebar would not take any space, then you would be able to specify width:100% for your content. Fortunately, that's what you can achieve with negative margins. It took me a while to understand, but I figured it out now.

It is easier to explain it visually, so I'll try to do that below. The margins I will refer to is the right margin of the left sidebar.

Sidebar div's right margin is 10px

Side
Your content
 

Sidebar div's right margin is 0px

Side
Your content
 

Sidebar div's right margin is -10px

Side
Your content
 

Notice the divs start to overlap. We can take this even further, see below.

Sidebar div's right margin is minus its width including borders

Also included a container div which acts like it's the browser's viewport. The content div's width is now set to 100%.

Side
Your content

Now both divs start at the same spot. To prevent the content from overlapping, padding may be used in the content div. See below.

same, but in addition, the content div's left padding is the sidebar div's width including borders

Side
Your content

Now that the content starts at the full left, you can specify width:100%. You can apply a similar trick for the right sidebar, or even for both left and right sidebars.

Use inner divs for borders and padding

The width specified does NOT include borders and padding. If you specify width: 100% and also specify borders or padding in the same div, then you will end up with a total width which exceeds 100%, creating horizontal scrollbars. Instead, create an inner div (a div within the content div) to specify borders and padding.So, in the example obove, you would add the padding in the content's inner div, not in the content's div itself where you specified the width.

Links in sidebar not clickable

There is this bug in Firefox and Safari, which make links in the sidebar unusable if you applied the tricks above. As a workaround specify "position: relative" in the sidebar.

Content cutoff in sidebars

The "position: relative" workaround above may cause a variant of the Guillotine bug to be triggered in Explorer. For example, if you have a drop right menu in the left sidebar, parts that stick out of the sidebar will be cut off. To prevent that from happening, apply "position: relative" to the subdiv's of the sidebar, rather than the sidebar itself.