Textarea very strange behavior
Please, have a look at http://jsfiddle.net/g995s/.
It is impossible to me to explain two things: The first one is why textarea goes outside its parent since height+padding-top=100%? The second one is how and from where this certain width of textarea is derived?
In regards to the first issue, the percentage based
padding-top value is relative to the width, not the height, therefore the positioning won’t be consistent if the width of the browser is changed - try resizing the window to see this.
The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.