Comments on: Exceptionally Negative

By: Laurence

Laurence — Fri, 04 Nov 2005 11:48:01 +0000

Thanks a lot – a recent design dictated that the entirety of the content section be padded (left) to a certain degree, save for a couple of ‘utility’ links (such as ‘Print Page’, ‘Back to top’) at the bottom which started further back, within the space created by the padding.
One of those things which should be really quick, but various methods I tried didn’t quite hit the mark. This came in really handy and saved me a few hairs!

By: Bruno Girin

Bruno Girin — Mon, 13 Jun 2005 20:06:23 +0000

That’s what I use to push photos and notes into the left margin on my blog. It works a treat!

By: Andres

Andres — Wed, 08 Jun 2005 22:52:59 +0000

I don’t think that anybody has mentioned this already, but one positive (depending on who you ask) side-effect is that elements that fall outside of the container due to nevagitve margins don’t count towards the total width of the container.
In other words, you can have a DIV set to 750px wide that has some elements that need to stick out due to the design (such as decorative graphics) and for some reason you can’t place it in the background of the BODY or DIV. You can position these with negative margins and have it not affect the DIVs width as far as the browser is concerned.
Why is this useful? No horizontal scroll-bars in some browsers.
I used this technique recently on a site that has some really complicated image layering that was unrealistic to do with background images and that went well beyond 1000px wide.
Thought I share my unexpected finding.

By: Greg

Greg — Sun, 05 Jun 2005 01:41:19 +0000

I don't know it it's been mentioned but you can also use negitave margins to center fixed-width DIVs horizontally and vertically. I use them for that all the time. :-)

By: John

John — Thu, 02 Jun 2005 06:17:01 +0000

Great post Dan! I just used this effect the other day to pull some headings over. It completely broke down in all versions of IE. IE just didn’t want to nudge the headers over. Tried a bunch of stuff, but in the end, I used some css filters to feed IE its own styles to work with.

By: Lisa Giovanni

Lisa Giovanni — Wed, 01 Jun 2005 13:33:02 +0000

This is so unbelievably cool tip. Thanks.

By: Dave

Dave — Tue, 31 May 2005 23:15:27 +0000

Hmm so how do you fix the problem in IE? As i have come accross this problem but found no easy solution.

By: Nathan Smith

Nathan Smith — Fri, 27 May 2005 20:25:44 +0000

In order to not have to use margin/padding hacks for IE, I usually never give side margin/padding to div’s but instead give margin/padding to h1, h2, p, etc. That way, there’s already the potential for varying indentation built-in.
That’s what I’ve done on my own site, anyways. I realize this might not be the most time-efficient way to do things, as it takes more fine-tuning. But, on that token – so do CSS hacks.

By: jon

jon — Fri, 27 May 2005 19:22:37 +0000

Aristotle, One major problem with that approach is that it can be a bit overreaching... for example, that will add a left-margin to all elements inside #content, not just its immediate descendents. Using the child selector would remedy this, but then it wouldn't work in IE. The negative margin approach appears to be simpler and more precise.

By: Jason

Jason — Fri, 27 May 2005 18:38:08 +0000

Mike- I'll give it a stab. Say we're talking about the top-margin only for an element. Initially we set it to 0px. Now, if we say: margin-top: 10px; the element will now have a position 10px further down on the page because of the space this margin creates. Conversely, if we say: margin-top: -10px; the element will now be 10px further up on the page because of the negative margin created. Maybe that is a clearer way of understanding. But like Ottawa says, trying it is the best way to get it.