CSS - padding with percent vs. padding with pixels

Question

I'm trying to build a UI that's all relatively based on the current DOM size. I'm doing this by heavily using percents.

One thing I'm trying to do is render nodes inside of an absolute container with padding-top:%.

The size that the % calculates is totally out of whack for me. I'm not sure what number the % is based off of but it certainly isn't the parent node. However, padding with a fixed pixel in the same dom hierarchy works fine.

See the JS fiddle below: http://jsfiddle.net/AK3eT/

    <div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; top:10%; width:30%; height:40%;">
    <div style="border:solid 1px blue;height:20px;margin-top:20%"></div>
</div>
<div style="display:inline-block;width:600px;border:solid 1px black;position:absolute; left:160px;top:10%; width:30%; height:40%;">
    <div style="border:solid 1px blue;height:20px;margin-top:48px"></div>
</div>

The left node is using % padding, the right node is using fixed pixel padding. They should be identical but the % padding is completely off.

Any ideas? I feel like I'm missing something fundamental here.

Answer 1

Yes you do :)

vertical margin or padding takes parent's width as reference when % is used : http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

Answer 2

margin-top: 20% specifies a top margin which is 20 percent of the width of the containing element. What I see from your code that the width of the containing element is 600px. so the top margin comes to 120px.Whereas in the case of right one it is only 48 px. That is why they are not identical.