title: Margin percentage different in Safari than Chrome/Firefox
body: <p>I'm encountering this weird bug in Safari and it's really annoying because I can't find a solution. I've looked at similar questions on StackOverflow and on the internet but none solved my question.</p>
  
  <p>The example in question is on <a href="http://jsfiddle.net/WQnVu/5/" rel="nofollow">http://jsfiddle.net/WQnVu/5/</a>. So basically I have an image (here it's a  of a fixed size) and two containers: one inner and one outer. The image is absolutely positioned relative to the outer container. To reposition the image relative to the width of the outer container, I then do a negative percentage margin-top. The code is as follows.</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
          &lt;div class="image"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .outer {
      height: 510px;
      width: 1024px;
      background-color: red;
      position: relative;
  }
  
  .inner {
      height: 100%;
      width: 100%;
      background-color: blue;
   }
  
   .image {
      width: 550px;
      height: 380px;
      position: absolute;
      top: 65%;
      right: 0;
      margin-top: -26%;
      background-color: green;
  }
  </code></pre>
  
  <p>The margin percentage is supposed to be relative to the <strong>width of the containing block</strong> of the image (in this case the inner container). This is indeed the case for Firefox and Chrome. In Safari however, it calculates the margin relative the <strong>height of the block itself</strong>, thus relative to the height of the image!</p>
  
  <p>I have no idea how to solve this issue. I really need the margin percentage because the site is responsive. The width of the containers is changing accordingly but the height remains constant. That's why I need something that is relative to the width of the containers. If there's a hack to specifically target Safari I'd happy to use it but as far as I know there's no such thing.</p>
  
  <p>It would be great if someone can think of a way to solve this.</p>
  
  <p>Kind regards,</p>
  
  <p>Yoran</p>