negative margins in css: good tutorial and tricks site?

Question

One of the css aspects which confuses me sometimes when I look at a site is negative margins used for layout. It takes me a while to understand what the designer is trying to do with negative margins across the page. I mean a page which has several div's, several using negative margins and I am trying to get my head trying to figure them out. I use Firebug to changes the values and see the effect.

Is there a good tutorial, bag of tricks site which teach a web designer how to use negative margins to their advantage. Of course tricks which work cross browser.

Trying to figure out what margin-left:-100% does.

Answer 1

Another article tells you simple way to use negative margin, which will also work in ie6...

Answer 2

A small note:

On a site I needed to layout the whole front page, which contained 8-12 "boxes" (1), so I used "boder: 1px solid black" to view that the boxes are in the correct locations, then fill that with a solid background to get the "more or less design of the site".

A few days later, the real background images came. The images contained a little "shadow", and the content of the images was a shade based on the solid color I used.

The solution was to use: "margin: 0px -5px -5px -5px" to keep the exact position/size, and then set the new images as the background of the original boxes.

Hope this gives you an idea about when to use negative margins.

(1) the terminology used by the customer was lamer