CSS - заполнение в процентах по сравнению с заполнением в пикселях

Я пытаюсь создать интерфейс, который относительно основан на текущем размере DOM. Я делаю это, сильно используя проценты.

Одна вещь, которую я пытаюсь сделать, - это сделать узлы внутри абсолютного контейнера с padding-top:%.

Размер, который вычисляет%, полностью исключен для меня. Я не уверен, на каком количестве% основывается, но это, конечно же, не родительский узел. Однако заполнение фиксированным пикселем в одной и той же иерархии dom прекрасно работает.

См. Скрипт JS ниже: 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>

Левый узел использует% padding, правый узел использует фиксированное заполнение пикселей. Они должны быть одинаковыми, но заполнение% полностью выключено.

Есть идеи? Я чувствую, что мне не хватает чего-то фундаментального здесь.