How does percent fill work?

Question

HTML

<div class='wrapper'> <div class='elementContainer'> This line should start halfway down the yellow box </div> </div> 

CSS

 .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; } 

Example script: http://jsfiddle.net/jakelauer/s2ZXV/

In the above example .elementContainer has a top of 50% . This should be calculated based on the height of the parent element ( .wrapper ), which means that it should go out at 150px . Instead, it goes at 200px . What's happening?

Answer 1

Specifications explain why.

<percentage>
The percentage is calculated by the width of the generated block containing the block

50% 400 is 200.