title: How does padding percentage work?
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='wrapper'&gt;
      &lt;div class='elementContainer'&gt;
          This line should start halfway down the yellow box
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper
  {
      position: relative;
  
      height: 300px;
      width: 400px;
  
      background: lightyellow;
      border: 1px solid black;
  }
  
  .elementContainer
  {
      position: relative;
      height: 200px;
      width: 300px;
  
      padding-top: 50%;
  
      background: red;
  }
  </code></pre>
  
  <p><strong>Fiddle example:</strong> <a href="http://jsfiddle.net/jakelauer/s2ZXV/" rel="noreferrer">http://jsfiddle.net/jakelauer/s2ZXV/</a></p>
  
  <p>In the example above, <code>.elementContainer</code> has a padding-top of <code>50%</code>. This should be calculated based on the parent element's (<code>.wrapper</code>) height, which means it should come out to <code>150px</code>. Instead, it comes out to <code>200px</code>. What's going on?</p>