Wednesday, July 29, 2009

Website Design and Negative Margins

A lot of us have developed websites, and I for one know that a lot of us are scared of using negative margins. A margin is a CCS property we use to allow an HTML DOM element to be shifted in a certain way. Normally it looks something like this:

#content {margin-left: 100px;}
This will shift the content to the right by 100 pixels.

A Negative margin is greatly underused and miss trusted and it normally looks like this:

#content {margin-left: -100px;}
This will shift the left side of the content to the left by 100 pixels.

I hear a lot of us going say what? I rather not use it then because they confuse me.
But before you throw them away remember that negative margins can help us out a lot and its even supported in IE6
Smashing Magazine has an excellent article on Negative Margins. Very much worth the read.

Find it here : Guide to using Negative Margins


  1. I'm not a web-head... can't think of any useful applications :(

    Seems like the entire frame (or whatever you call it) should then have been originally shifted 100px.