Home/ Questions/Q 271215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T00:07:34+00:00

One of the css aspects which confuses me sometimes when I look at a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS widths in general can be a little confusing. Absolute widths are easy. Relative widths can lead to some interesting behaviour. Basically, percentage widths are relative to the containing element. If the parent element has an absolute width then it’s easy to work out. Often it doesn’t though so you can get into complicated calculations of how a browser calculates how much space it needs. If all its children are percentage width then it’ll often end up having less width than the designer usually intends.

    So when you see margin-left: -100%, that basically means move this element outside its parent to the left the complete width of the parent. One consequence of negative margins (in particular) is that the space they move into often won’t cater for them being there and you have to take this into account when planning layout.

    Another good tip is that if you have this situation:

    <div id="outer">
  Outer
  <div id="inner">Inner</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#inner { width: 50px; margin-left: -100px; }
<style>

    it won’t really work. Or rather it’ll work on (iirc) Firefox but not on IE (any version). So if you want to do something like this, you need to use a containing element.

    <div id="outer">
  Outer
  <div id="wrap">
    <div id="inner">Inner</div>
  </div>
</div>
<style type="text/css">
#outer { width: 100px; }
#wrap { width: 100px; margin-left: -100px; }
#inner { width: 50px; }
<style>

    and that’ll be much more browser compatible.

    Here’s a complete example that demonstrates negative margins (verified on FF, Chrome and IE8):

    removed dead ImageShack link

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Negative Margins</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
body { background: #A7A37E; }
#outer { width: 800px; background: #E6E2AF; margin: 0 auto; padding: 15px 0; }
#wrap { width: 500px; background: #EFECCA; margin: 0 auto; padding: 10px 0; }
#inner { color: #002F2F; margin: 10px 30px; }
div.left-note, div.right-note { width: 150px; }
div.left-note div, div.right-note div { background: #046380; margin: 10px; color: #EFECCA; padding: 10px; font-weight: bold; }
div.left-note { margin-left: -180px; float: left; }
div.right-note { margin-right: -180px; float: right; } 
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="inner">
<div class="left-note"><div>Some important text to the left</div></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="right-note"><div>Some important text to the right</div></div>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
    • 0