For more information, go to http://jsfiddle.net/A2Qnx/1/
<div id='w'>
<div id='p'>
<div id='c'>
</div>
</div>
</div>
With absolute positioning enabled, div P has a height of 60px (50 from the parent + 10 from padding).
If you disable absolute positioning, both div P and div W will have a shared height of 110px (100 from the child elements + 10 from padding).
I am curious to know why this behavior occurs.
1) When absolute positioning is on, why does P's height derive from the min-height of the parent instead of the children's heights? And why is padding only applied to P?
2) When absolute positioning is off, why does P's height come from the children's heights instead of the min-height of the parent? And why is padding applied to both P AND W?