The Definitive Guide to Using Negative Margins

Advertisement

Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with coding elegance.

Out of all the CSS concepts designers have ever used, an award probably needs to be given to the use of Negative Margins as being the most least talked about method of positioning. It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.

1. Setting the record straight

We all use margins in our CSS, but when it comes to negative margins, our relationship somehow manages to take a turn for the worse. The use of negative margins in web design is so divided that while some of us absolutely love it, there are also those who simply think it’s the work of the devil.

A negative margin looks like this:

#content {margin-left:-100px;}

Negative margins are usually applied in small doses but as you’ll see later on, it’s capable of so much more. A few things to note about negative margins are:

  • They are extremely valid CSS
    I’m not kidding on this one. W3C even says that, “Negative values for margin properties are allowed…” ‘Nuff said. Check out the article1 for more details.
  • Negative margins are not a hack
    This is especially true. It’s because of not understanding negative margins properly that it got its hackish image. It only becomes a hack if you use it to fix an error you made elsewhere.
  • It goes with the flow
    It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well.
  • It is highly compatible
    Negative margins are wholly supported across all modern browsers (and IE6 in most cases).
  • It reacts differently when floats are applied
    Negative margins are not your everyday CSS so they should be applied with care.
  • Dreamweaver doesn’t understand it
    Negative margins don’t show up in the Design View of DW. Why are you even checking your site in Design View anyway?

2. Working with negative margins

Negative margins are very powerful when used correctly. There are 2 types of scenarios where negative margins take center stage.

Negative Margins on Static Elements

Negative margins motion on static elements

A static element is an element with no float applied. The image below illustrates how static elements react to negative margins.

  • When a static element is given a negative margin on the top/left, it pulls the element in that specified direction. For example:
    /* Moves the element 10px upwards */
    
    #mydiv1 {margin-top:-10px;}
  • But if you apply it to the bottom/right, it doesn’t move the element down/right as you might think. Instead, it pulls any succeeding element into the main element, overlapping it.
    /* 
    * All elements succeeding #mydiv1 move up by
    * 10px, while #mydiv1 doesn’t even move an inch.
    */
    
    #mydiv1 {margin-bottom:-10px;}
  • If no width is applied, adding Negative Margins to its left/right pulls the element in both directions increasing its width. It’s here that the margin acts like a padding.

Negative Margins on Floated Elements

Consider this as our actual markup:

HTML

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
  • If a negative margin is applied opposite a float, it creates a void leading to the overlapping of content. This is great for liquid layouts where one column has a width of 100% while the other has a definite width, like 100px.
    /* A negative margin is applied opposite the float */
    #mydiv1 {float:left; margin-right:-100px;}
  • If both elements are floated left and margin-right:-20px is applied to #mydiv1, #mydiv2 treats #mydiv1 as if it were 20px smaller in width than it actually is (thus, overlapping it). What’s interesting is that the contents of #mydiv1 don’t react at all and continue to retain its current width.
  • If the negative margin is equal to the actual width, then it overlaps it entirely. This is because margins, padding, borders, and width add up to the total width of an element. So if a negative margin is equal to the rest of the dimensions then the element’s width effectively becomes 0px.

3. Effective Techniques

Since we now know that applying a negative margin is valid CSS2 code, using it provides for some very interesting CSS techniques:

Making a single <ul> into a 3-column list

Splitting a list into 3 columns

If you have a list of items which are just too long to display vertically, why not divide them into columns instead? Negative margins let you do this without having to add any floats or additional tags. It’s amazing how it easily lets you divide the list below into 3 separate columns, like so:

HTML

<ul>
   <li class="col1">Eggs</li>
   <li class="col1">Ham<li>
   <li class="col2 top">Bread<li>
   <li class="col2">Butter<li>
   <li class="col3 top">Flour<li>
   <li class="col3">Cream</li>
</ul>

CSS

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */

By adding margin-top:-2.6em (twice the line-height of <li>) to .top, all elements move up in perfect alignment. Using a negative margin is more appropriate than applying relative positioning since you only have to apply it to the first of the new columns instead of to each <li> tag. Cool, huh?

Overlap for added emphasis

Phlashers.com

Overlapping elements on purpose is also a good design metaphor. It adds emphasis to specific elements since the overlapping effect creates the illusion of depth. A good example would be the comments section of Phlashers.com2, which uses an overlapping technique to draw attention to the number of comments a post has. Combine this with the z-index property and a little creativity and you’ve got it made.

Smashing 3D text effects

3D effects

Here’s a neat trick. Create Safari-like text, which are slightly beveled by creating 2 versions of your text in 2 different colors. Then use negative margins to overlap one over the other with a discrepancy of around 1 or 2 pixels and you’ve got selectable, robot-friendly beveled text! No need for huge jpegs or gifs which devour bandwidth like fat pigs.

Simple 2-column Layouts

Negative margins are also a great way to create simple 2-column liquid layouts where the sidebar has a preset width and the content has a liquid width of 100%

HTML

<div id="content"> <p>Main content in here</p> </div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

And there you have a simple 2-column layout record time. It works flawlessly in IE6 too! Now, to prevent #sidebar from overlapping the text inside #content, simply add

/* Prevent text from being overlapped */

#content p {margin-right:210px;}

/* It’s 200px + 10px, the 10px being an additional margin.*/

When used properly, negative margins can also provide what’s called a Flexible Document Structure which absolutely kicks tables in the face. Flexible Document Structure is an accessibility and SEO technique which allows you to arrange your markup in almost any order depending on your intentions. Tom Wright wrote an interesting article3 which discusses possible applications of negative margins in multicolumn layouts.

Nudging elements into place

This is the most common (and simplest) usage for negative margins. If you’re inserting a 10th div in a sea of 9 other divs and somehow it just won’t align properly, use negative margins to nudge that 10th div into place instead of having to edit the other 9.

4. Bugfixes

Text and Link problems

Using negative margins with floats sometimes pisses off older browsers. Some symptoms include:

  • Making links unclickable
  • Text becomes difficult to select
  • Tabbing any links disappears when you lose focus

Solution: Just add position:relative and it works!

My picture got cut-off

If you have the bad luck of using IE6 in the office, sometimes content will suddenly be cut-off when overlapping and floats are concerned.

Solution: Again, just add position:relative to the floated element and everything goes back to normal.

5. Conclusion

Negative margins have a place in modern web design because of its ability to position elements without any additional markup. With more users switching to more updated browsers (IE8 included), the future looks very bright for sites which rely on this technique.

If you have any unique experiences with negative margins, let me know by posting a comment.

6. Resources

More info on negative margins.

Footnotes

  1. 1 http://www.w3.org/TR/CSS2/box.html#margin-properties
  2. 2 http://phlashers.com/blog/?p=180
  3. 3 http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra
  4. 4 http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/
  5. 5 http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra
  6. 6 http://www.mindfly.com/blog/post/2009/01/Get-Refreshed-Liquid-Layouts-With-Simpler-CSS-and-Without-A-Semantic-Mess.aspx
  7. 7 http://www.alistapart.com/articles/negativemargins/
  8. 8 http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#margin-properties
  9. 9 http://www.brainbell.com/tutorials/HTML_and_CSS/Using_Negative_Margins.htm
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15

↑ Back to topShare on Twitter

John Imbong is a freelance designer who eats HTML for breakfast with a side of bacon (mmmm...bacon). He is also the CTO for Gourmee.com and is one of the founders of Phlashers.com. Follow John on twitter or through his portfolio site at Johnimbong.com.

Advertising
  1. 1

    Awesome tutorial! I thought it was a hack or some illegal thing, now I can safely use it!

    -1
  2. 2

    Negative margins should never be used to position elements. Use Top, Right, Bottom, or Left on either a relative or absolute positioned element instead.

    Margins should only be used for separation, not positioning.

    -24
  3. 3

    Margins should only be used for separation, not positioning.

    Why? Where is it written that using negative margins is illegal? In some cases, using position: relative/absolute isn’t appropriate or won’t work.

    If you use position: absolute, the element is taken out of the flow and other elements will occupy whatever space the positioned element would normally have unless you make allowances to move the following elements out of the way.

    If you use position: relative, then the element is moved, but the space that it would normally occupy is left behind, leaving a space in your layout. The only way to solve this is… wait for it… to use a negative margin to pull the following content back up into place.

    As the author says, using negative margins is a perfectly valid technique and if you’re not using it due to some obscure notion of what is right and what isn’t, then you’re depriving yourself of a very useful CSS tool.

    10
  4. 4

    Great article, I’ve never really understood why so many people are against the use of negative margins but this is a very clear and concise argument for their proper use.

    @Paul Grendek thats a pretty strange stance especially when you consider that positioned elements are not treated the same way across all browsers (IE6 isn’t dead yet). Positioning elements in that format also causes problems with fluid pages/content so they are somewhat inadvisable when it comes to good usability.

    @Mike they are nice for lists but be aware that you will have to know how many items are in the previous column to be able to correctly multiply the line height so its going to be a bit problematic for dynamic lists but otherwise a very handy trick.

    2
  5. 5

    Alexandre Romero

    July 27, 2009 5:43 pm

    Negative margins always causes me lots of trouble. I prefer not use it if i have other options.

    2
  6. 6

    Great article!

    0
  7. 7

    Great guide, thank you!

    1
  8. 8

    Coming from Indesign it took me a while that there is a live outside the box in CSS. Same thing with negative positioning. Don’t forget to reset before you use negative values :)

    0
  9. 9

    Check out http://www.eaglerockschool.org – site I designed a few years back. We used negative margins out the wazoo on that one.

    0
  10. 10
  11. 11

    Great article, I don’t know why people are so scared about using negative margins, when used correctly they can make a site look one hundred per cent better than it did, it works particularly well with footers that you want to blend in.

    One thing, remember that z-index:; is a handy tool when it comes to ;).

    0
  12. 12

    Multi-column lists looks really handy, thanks!

    0
  13. 13

    Great article. Works great in Firefox but not in IE 6…. Any trick for this one?

    0
  14. 14

    I never knew there was much of any debate on the use of negative margins. I always used them with no issues, just following the spec. I tend to let others debate these things endlessly. The rest of us have work to do. Great piece, John.

    0
  15. 15

    Be very careful about saying “just add position:relative;.” IE6 and IE7 will not respect z-index values for relatively positioned elements; they are always put at the top of the stack. This will cause problems if they ever overlap with pull-down/ fly-out elements like menus, as the menu will always be beneath them. Relative positioning is very useful, but needs to be used with caution.

    0
  16. 16

    Russell Heimlich

    July 27, 2009 1:20 pm

    Pownce.com used negative margins on an image to create interest. It was such a neat effect -> http://web.archive.org/web/20071224051229/http://www.pownce.com/

    0
  17. 17

    Good idea with the beveled text look.

    0
  18. 18

    @John Faulds: absolutely. thats why i use negative margins all the time.

    @Paul Gendek: how do you solve these spacing problems John Faulds speaks of without using negative margins?

    0
  19. 19

    IE6 and IE7 will not respect z-index values for relatively positioned elements

    Yes they do, they just don’t inherit them correctly from their parents but instead need to be stated explicitly. See Anne van Kesteren’s article for more details. So all you need to do is remember to declare z-index on relatively positioned elements where necessary and you’ll be fine.

    And just a comment on the bevelled text technique: there’s two reasons why you’d be better off not using that technique:

    1. you need to have the same piece of text written out twice in the source which means it’ll appear twice on the page if styles are off and will be read out twice by screenreader users (which would be very annoying).
    2. the same effect can be achieved using text-shadow which is now supported by FF3.5, Opera 10 and all Webkit browsers.

    -1
  20. 20

    hm my site uses a negative margin to make a sidebar, just two divs in to a wrapper+subwrappers (and ofc a reset.css)
    i already tested:
    win: ie6, ie7, ie8, firefox 3.5, safari 4, opera 9.64
    mac: safari 4, opera 9, opera 9.64, firefox 3.5

    all of them display almost the same, but even reseting everything you still have some pixels difference, btw i’m using “em” to the width/min-width

    any fix for this small diferences (its like 1 or 2 px) or any idea what element is causing this? there’s a difference (specially in opera) even with fixed width + negative margins

    0
  21. 21

    Good post. I have used negative margin without much issue in most of my projects. Difficulty in selecting text was an issue and had to find out the solution by trial and error.

    0
  22. 22

    Wow the beveled text effect is an amasing idea! Never would have thought about it!

    0
  23. 23

    Great article. I’ve never looked into negative margins before, just started using it gradually as I found it handy.

    0
  24. 24

    A Website Designer

    July 27, 2009 3:31 pm

    I am just pleased to see in black and white negative margins are not a hack! :-)

    1
  25. 25

    i use negative margins in The Guidon website. I used to think it’s weird to have them :))

    0
  26. 26

    Negative margins can also be helpful in multi-column layouts, if you want to reorder the columns without changing the HTML source, for example to keep your main content first in source order.

    Another common use is when you want to keep some text in the HTML source for accessibility or SEO reasons, but hide that text on-screen, typically because you’re using some sort of background-image replacement technique.

    0
  27. 27

    very useful, I am trying to implement it my own website

    0
  28. 28

    great! great! great!

    thanks!

    0
  29. 29

    I must admit, I pretty much avoided negative margins in the past for no particular reason. Maybe it was a negative value for a property that got me a bit ‘suspicious’ :) I did use negative margins when there was no other way to do the job, but after reading this article I will use this positioning technique just like any other. Thank you SM! :)

    1
  30. 30

    Great article! I feel more comfortable using negative margins – I was using them but thought it was risky :)

    1
  31. 31

    Great article. I didn’t know that people don’t speak about negative margin!

    I use negative margin for some elements in the background that I don’t want to be scrollable. For exemple, if I have a content column of width 700px, and some elements at the left and at the right in the background, I want that if I reduce the window size, there would have no horizontal scroll for them.

    At the left, this elements have a negative margin-left to go at the right place, And so, the browser doesn’t count them as elements to be scrollable. Then small screen with a window open at 700px width won’t see background decorative elements that are not usefull to read content, and they won’t have the horizontal scroll.

    I think this technic is nice to handle some wide decorative background, if only it would work also with the margin-right. Unlucky the horizontal scroll apears even with a simple negative margin-right. Any idea for the right side?

    Thanks for this article

    0
  32. 32

    Sig. Tolleranza

    July 27, 2009 10:45 pm

    Really great tutorial. Thanks a lot!

    0
  33. 33

    Cool tips,
    Thanks a lot. Now, i can use negative margin where i need.

    0
  34. 34

    the multicolumn list trick is cool!
    thanks a lot

    0
  35. 35

    Felix Buenemann

    July 27, 2009 11:49 pm

    I use negative margins to line up column text in multi column layouts but keep headings above the text. Apply a margin-top on all columns, then use a negative margin-top of same amount on the first heading in that column with a class like h1.first-header.

    1
  36. 36

    Negative margin is your friend! :)

    0
  37. 37

    Lovely article :)

    0
  38. 38

    Concerning the fantastic beveled text trick:

    I’ve tried it now, and it “works” in FF, Chrome and Safari, BUT it differs with around 6px or so in IE8 and Opera.

    Any workaround to avoid this without hacking (have tried position:relative already).
    I’ve also added: * {margin:0;padding:0;} to the css.

    0
  39. 39

    Great article.

    Negative margins can be used to create flexible cross-browser equal-height columns as described here: http://socialgeek.be/blog/read/flexible-equal-height-columns

    0
  40. 40

    I often wonder how afraid are the authors when it comes to subjects which are…let’s say a little more discussed than normal. Do they ever fear an angry CSS/HTML mob ready to burn you at the stake? ;-)

    Seriously almost all hotly discussed topics have their place in a web designers tool bag and this works really well and I do use it. As long as it is only one tool in many and not the solution to all life’s problems it will always be very useful.

    0
  41. 41

    Hi,
    thanks for the article. I had the question about validity of negative margin since if first used them. Thanks for giving clarification.

    0
  42. 42

    Simple and great.. Thanks for effort.

    0
  43. 43

    Dylan Harrington

    July 28, 2009 1:57 am

    pretty neat article. fyi there are a few typos in the 3 column example (html part).

    0
  44. 44

    Thanks for the informative article.

    0
  45. 45

    Thanks for the short and great article!

    0
  46. 46

    I never understood the behavior of “position:relative”. It annoys me until I discovered negative margins were doing the trick ;)

    0
  47. 47

    Very interesting article !
    It has changed a little bit my opinion (very “negative”) on negative margins. To my mind it’s not necessary to put negative margins when we can avoid it. But, your examples make me realized that is sometimes usefull (example for the display of the ul list).
    Thanks for sharing your knowledge about CSS.

    0
  48. 48

    3-column list technique was most unexpected for me. Thanks!

    0
  49. 49

    great article on a feature of css that many consider to be a bug…

    0
  50. 50

    Thanks! Can’t wait to use the 3colomn list technique!

    0
  51. 51

    And pretty usefull when using sprite technology to reduce the httprequests on css images

    0
  52. 52

    Great article.

    The best use I’ve found is for something like the above ^^^ where you’ve got a left (name) and right (avatar) element.

    Keep both elements in the normal flow of the page but use text-align: right; on the right element (or within a span set to display: block; containing that element.)

    Then use a negative top margin to bring the right element up in line with the left element.

    No containing div, no float. Easy :)

    0
  53. 53

    Beveled text effect is interesting looking and worth a try. Thanks.

    0
  54. 54

    Great Article again! The column techniques are cool.

    0
  55. 55

    By adding margin-top:-2.6em (twice the line-height of ) to .top, all elements move up in perfect alignment.

    What if the contents of an spans across two lines?

    0
  56. 56

    @LC: Although I cautioned against over-using position:relative; in my comment above, it has many very useful features. The one that I use most often is to define a container for a position:absolute; element. Absolutely positioned elements will base their positioning of whatever parent container it can find that is relatively positioned, defaulting to the body if none are found.

    0
  57. 57

    Helpful idea. learn a nice technique. Thanks

    aR
    Bangla Hacks

    0
  58. 58

    Bravo!
    Multicolumn lists are really cool, yeah.

    0
  59. 59

    i love negative margins. i wish IE did too.

    0
  60. 60

    Great article, minus the little bit about using it for beveled text. To create that effect you’d have to have two instances of the exact same tag. Not semantic, and certainly not effective separation of content and presentation (the goal of CSS in the first place). I suppose you could use JavaScript to generate the second tag (so it wouldn’t show up for robots and screen readers), but at that point you might as well use image/Cufon/sIFR

    0
  61. 61

    Very interesting – I’m sure it’s going to come in handy.

    0
  62. 62

    Amazing article! I never new negative margins could do so much like that multicolumn unordered list. I can’t wait to see what your next post will be about.

    0
  63. 63

    I love using negative margins. I hadn’t ever thought to do what you have with the list columns though, usually I’d use floats, which of course wouldn’t work for having a 2×3 grid like you do in the example (in the same order anyway).

    Really fantastic article. I hope a lot of people learn from it :D

    0
  64. 64

    Why not use tables for #3? It is, after all, tabular data and tables would mark it up more semantically than a mess of CSS and class attributes.

    0
  65. 65

    Thanks! I knew a lot of this but it’s good to calm some of my fears about browsers not liking it.

    0
  66. 66

    Eduardo Ottaviani

    July 28, 2009 11:29 am

    Thank God I´m not getting crazy.

    I was criticesed once for using negative margin and they told me not to use it… Ever! But I’ve never know why.

    I think that´s because people think “negative is a bad thing, and positive is a good thing” =)

    To me, is way much better to use negative margins rather than relative or absolute positioning in some cases.

    0
  67. 67

    Marcelo Figueroa

    July 28, 2009 6:44 pm

    Awesome!

    0
  68. 68

    Why not use tables for #3? It is, after all, tabular data and tables would mark it up more semantically than a mess of CSS and class attributes.

    No it’s not; it’s a list of items split into three columns. It’s only tabular data if you need to define a relationship along horizontal and vertical axes where that relationship is different from that defined in other columns or rows, ie, do you need row or column headings to describe the content? In this case, you don’t – it’s just a list of items.

    0
  69. 69

    Very great article, I really appreciate it. But remain always positive :(

    0
  70. 70

    Negative margins are one of the most underrated uses of CSS. Unfortunately, many designers feel as though they are “cheating” by using negative margins.

    0
  71. 71

    Great article! Thank you.
    My favorite is #3
    :)

    0
  72. 72

    ‘It is highly compatible”

    AHAHAHAHAHAHHAHAHAHAHHAHAHAHHAHAHA

    1
  73. 73

    Kruger Leminworthy

    July 29, 2009 2:34 pm

    Dreamweaver doesn’t understand it
    Negative margins don’t show up in the Design View of DW. Why are you even checking your site in Design View anyway?

    I’m new to web design and all I use is Dreamweaver. Why shouldn’t I be editing my pages in Design View? Do you mean running it through a browser to see how it looks as a way of checking the pages? I know to do that, but if there’s something I shouldn’t be doing in Dreamweaver, then let me know!

    0
  74. 74

    Tell me if im wrong, but i never ever use relative or absolute positioning in my designs. Z index just causes problems down the line (IE6 relative bug – and if you have a ton, you need to sort through and remember the order – any forget it with mega dropdowns or flyouts). And I never thought there was anything wrong with neg. margins. Am i crazy?

    When do I need to use positioning?

    What I’d like to see is a universally accepted global reset. There are so many that claim to be “the one”.

    0
  75. 75

    Nice article, just one note about something totally unrelated: in the presentation about the author, CTO is wrapped with abbreviation tags, but it’s actually an acronym. An abbreviation would be something like Mr. or etc. I just had to say this because many people get this wrong.

    0
  76. 76

    Question about the 3-column-list: Why does the third column class have the same margin values than the second column class ? Why do they align so perfectly?

    0
  77. 77

    I’m new to web design and all I use is Dreamweaver. Why shouldn’t I be editing my pages in Design View? Do you mean running it through a browser to see how it looks as a way of checking the pages?

    Because prior to CS4, DW used its own rendering engine to display pages in design view. As no-one browsing the web uses that rendering engine to view pages, you’re getting an inaccurate view of how your pages will appear in real browsers.

    CS4 now uses the Webkit rendering engine so a lot of these problems are probably alleviated now but you’re still better off coding everything by hand and then previewing in browsers so you actually get an understanding of what you’re doing. Not having used CS4 myself, I also can’t vouch for the quality of CSS that CS4 outputs.

    0
  78. 78

    Great! You just solved some of my problems! Thanks

    0
  79. 79

    Never thought this subject could deserve its own article and was brutally proved wrong. Very useful addition to my CSS skill set.

    0
  80. 80

    We have to care about IE6 when we talk about negative margins… It have a lot of bugs!

    0
  81. 81

    I didn’t realize negative margins were such a taboo topic, I’ve been using them for a while to great effect. I didn’t think of the 3-column list and the beveled text tricks though. Those would be very useful :) Great article.

    0
  82. 82

    The IT guy I worked that he hated negative margins so much that he TOLD (as in authority) me not to use it. He’d rather rewrite my entire CSS than to apply my negative margins. Now I got something to shove at his face, too bad he quit.

    Thanks for a great article.

    0
  83. 83

    Great article, thanks!

    0
  84. 84

    Kruger Leminworthy

    July 31, 2009 8:48 am

    @ John Faulds

    Thank you very much. I know little of what the standard work flow is in Web Design among web designers, so I’ll make it a priority to transition from DW to coding by hand, if that’s the sensible route to take. I appreciate the advice.

    0
  85. 85

    Hi, guys. I’m glad a lot of you found this article very usefull. Negative margins are actually very useful but like everything else CSS, it has to be used at the right time and in specific amounts. I’m just glad I was able to remove all your doubts concerning negative margins as a hack when in fact it’s not.

    For those who are having IE6 issues, I always try several other methods which usually range from manipulating margins to positioning and if worst comes to worst: markup change. If there’s one good thing to say about IE6, it’s that if it didn’t exist then web design probably wouldn’t be as challenging/exciting as it is today.

    Watch out for my next article which features a ton of other “why didn’t I think of that” techniques and, hopefully, a few others featuring the kick-ass jQuery javascript framework.

    Cheers!

    0
  86. 86

    Awesome!

    My ears are clapping. Thanks!

    0
  87. 87

    Great article. Works great in Firefox but not in IE 6…. Any trick for this one?

    What’s your problem look like? There’s always more than one way to do things in CSS. If HTML is all about what the most efficient markup would be, CSS would be about using what works. This is very evident in the use of CSS for specific browsers.

    0
  88. 88

    The IT guy I worked that he hated negative margins so much that he TOLD (as in authority) me not to use it. He’d rather rewrite my entire CSS than to apply my negative margins. Now I got something to shove at his face, too bad he quit.

    Hahaha! If you see him again, the pleasure is all yours. Make sure you count the number of times he stutters when he tries to defend himself.

    Ironically, I know how he feels though.

    0
  89. 89

    That’s a very nice article, thank you.

    0
  90. 90

    Very enlightening, always cool to have more tools.

    0
  91. 91

    I started using negative margins recently to nudge a few images a bit into an adjoining column. Gives a nice effect and makes the layout flow and look creative, as opposed to looking like it was made on a grid.

    I don’t understand the CSS Police. If the code validates and you get the desired result in the major browsers, what’s the problem?

    Ed

    0
  92. 92

    Negative margins aren’t really a thing of the devil; I think they can create neat effects, and break the borders a bit with graphics.

    0
  93. 93

    Incredibly awesome! Thanks!

    0
  94. 94

    Dreamweaver is Good!.. but we are all web designer. Dreamweaver doesn’t work as Cross-browser compatibility.

    Remains Positive. :)

    0
  95. 95

    Excellent overview of negative margins; complete yet concise. This helped me with my fluid layouts. I gave you credit in my blog (www.boxertech.com)

    0
  96. 96

    Saying you can’t use a table if it isn’t tabular data is a lot like saying you can’t use negative margins because they are evil. If the end result is a well-formatted page, why not use a table for a 3 column list?

    -2
  97. 97

    Any hints around how to fix that cool 3-column-list for IE ??? That would be helpful, I tried a lot but nothing worked …

    0
  98. 98
  99. 99

    awesome help!
    linked you in my blog post: background image overlap using negative (minus) margins

    0
  100. 100

    Abdul Ahad Bukhari

    June 7, 2010 3:48 am

    Didn’t thought negative margins will be so useful, i like the way ul is customized, thanks for the article

    0
  101. 101

    I LOVE you guys for this. This is the exact article I’ve been looking for. I’m good at everything in CSS except negative values.

    -2
  102. 102

    Thanks for this. This really clears up negative margins and how they should be used.

    0
  103. 103

    Thank you so much. I had exhausted a ton of css solution to try to get my design cross-browser compliant and the solution was “position:relative;”.

    Never would have thought of that!

    0
  104. 104

    I’m thankful for this article but, this is sooo complicated…I swear I could cry right now.

    -1
  105. 105

    position; relative: THANK YOU!!!

    0
  106. 106

    Great article!

    One question though:
    I used to use a relative DIV “wrapper” to embed all content. In that case, if the browserscreen was smaller than the defined Width for the wrapper, on the right side of the screen part of the website became hidden.
    With the negative margin option though, if the browserscreen becomes smaller than the defined Width of the website, then on BOTH left and right side of the browserscreen content is hidden.

    How do I make sure content on the LEFT side of the browserscreen is NOT hidden (when using negative margins)?

    -1
  107. 107

    very nice and helpful article

    -1
  108. 108

    Hi,

    Has anybody experienced problems with Chrome not rendering a negative margin-top correctly?

    Chris

    0
  109. 109

    Just because you can, doesn’t mean you should! Of all the things on the list of Do’s, this is the only one that I disagree with. It’s an amature move, seriously and I suggest you stop doing it and learn how to use positioning. In addition it’s a maintenance nightmare and if you do it in enterprise applications, you’re going to cause quite a headache for those who have to maintain the code after you. Just avoid it, you’ll look like a hack!

    3
  110. 110

    I got the same bug here… Chrome is not showing a negative top margin correctly. The worse is that it only happens sometimes, and when it does, a browser refresh solves the problem. I’m looking for a workaround; suggestions are welcome.

    2
  111. 111

    I have developed more than 20 xhtml pages and never had a problem using negative margins. IMHO negative margins are a time saver in most cases, in other cases they can really help you if you are using some ‘hard to position’ script, well even when developing with javascript negative margins can be very useful.

    I don’t understand the people that prohibits the use of negative margins, just typing a -1 you can easily fix a wrong positioned element. And it is valid!

    0
  112. 112

    nice man it is very helpful to me for doing work…………………

    -1
  113. 113

    So you did, did you? I won’t tell.

    0
  114. 114

    It’s always best to code off the bat in Code View then preview using real browsers. Think of it as web designer training except you’re both the student and the teacher. FYI, I use Dreamweaver for all my projects whether it’s a static site, WordPress Theme or Drupal Theme.

    0
  115. 115

    If you liked the beveled text effect, it’s much better now to use the new CSS 3 implementation of the text-shadow property.

    It goes like this: #thistext {text-shadow:1px 1px #000;}

    Nice and simple.

    -2
  116. 116

    No, no, no, no, no! Sorry, but the examples are really, really bad practice.
    You seriously think it’s a good idea to position elements using negative margins?

    It doesn’t matter how “valid” it is, it’s still the “wrong” way of using CSS. Margins are used to create space between the bounding box of an element and its content, ignoring background. Much like padding, but outside the box, so to speak.

    Even though this is an “old” article, please put a disclaimer on top stating there are better ways to achieve the effects mentioned, using positioning and CSS3 (for the beveled text example).

    0
  117. 117

    John, thanks for the great article! This has been very helpful in my efforts to hack the WordPress Twenty Ten theme into a custom theme for Hale College. I’m looking forward to digging through some more of your articles. Cheers!

    1
  118. 118

    Thanks man. Excellent article. I’ve been looking for a solution to the negative margin-left in I.E. and I only found it in your post. I put position-relative as you told. Thanks a lot.

    1
  119. 119

    Thanks from Norway!

    0
  120. 120

    Thanks for the article John, margin negative is really a life-saver. Shared the article! Regards

    0
  121. 121

    Hi guys,

    Hoping someone’s still checking these comments.

    My issue is that my negatively margined (?) div is ‘covering’ the links of the div underneath. I need links to work in both divs, and z-index doesn’t seem to be working at all. Neither divs are floated, just the bottom div pulled up a bit with a negative margin on top and it’s ‘covering’ links of the div below it.

    Any thoughts? Thanks!

    The site in question is here: http://dawsondental.ca

    0
  122. 122

    I have not seen such a good article on negative margins……Thanks John!

    0
  123. 123

    DEAR LORD THANK YOU. I’m designing a site for a class I’m taking and I have a protruding image that extends down into my navbar. I used {margin-top:-30px;} to get the #nav to connect to the image and achieve the overlap. Unfortunately, this killed the links in #nav. I added {position:relative;} to each of the divs involved, but it was still broken in IE. I added relative positioning to the list and anchor elements (which are floated) and voila!

    You spoke in a language I could understand and I thank you good sir!

    0
  124. 124

    Also be aware that if a list item text breaks over two lines, then the negative margin of 3 * line height isn’t going to work.

    0
  125. 125

    OK, I doubt I get a response four years after this was written, but I have an issue with a nav that I want fixed on the page when you scroll down. I have a negative margin that is causing my fixed div to disappear in Safari. When I set the position to relative for the div, it shows up in Safari but now it scrolls with the rest of my site.

    So can I have the best of both worlds somehow? A fixed positioning that still jibes with Safari??

    0

↑ Back to top