CSS padding-top: 100% uses width of parent?

Question

I am a little stumbled at this find and cannot explain to myself the reasoning behind this.

The attached fiddle shows two DIVs, one nested in the other. The outer DIV has a set height and width as well as relative position. The inner DIV also has a set height and width. In addition to that, it was has top, right, and bottom padding set to 100%. \\

From what I understand padding will be derived based on the parent's height and width. However, the result shows that all padding (top, right, and bottom) reference only parent's width. It seems that all browsers render the same results. As such, it must be part of some standard.

My question is why has this been implemented in such a way and whether there is a way for me to reference parent's height instead of parent's width for top and bottom padding.

Answer 1

Yes, you are correct about padding-top percent referring to the width. It is part of the W3 CSS Box model specifications:

http://www.w3.org/TR/CSS2/box.html#padding-properties

You will not be able to reference height with padding percentages. It will always refer to width. Sorry =(