title: Inconsistent percentage margin calculation for absolutely positioned item
body: <p>I have a situation where I have a 'bottom' content div within a general container. This div should stay at the bottom (with absolute positioning), but have a percentage gap to base of the container. The percentage should be relative to the width of the container.</p>
  
  <p>We can't use 'bottom:5%' because <a href="http://www.w3.org/TR/CSS2/visuren.html#position-props" rel="nofollow">as the position props define</a> this is relative to the height. How about margin? Yes! It works in Chrome .. and Firefox. Ah, but not in Safari. It seems Chrome and Safari calculate it based on the container width and Safari on the container height.</p>
  
  <p>See <a href="http://jsfiddle.net/3gxSk/6/" rel="nofollow">this fiddle</a> in Chrome and Safari and you'll see the inconsistency. CSS styles:</p>
  
  <pre><code>.container {
      background: #990000;
      width: 345px;
      height: 200px;
      position: relative;
  }
  .bottom {
      background: #000;
      width: 100%;
      height: 40px;
      position: absolute;
      bottom: 0;
      margin-bottom: 5%;
  }
  </code></pre>
  
  <p>Anybody know where the bug lies here - with Safari? Chrome/Firefox? The spec?</p>
  
  <p>A quick check shows that padding might work consistently, but it's not ideal for those who would want to use margin (i.e. when a background comes into play).</p>