In this JSFiddle
http://jsfiddle.net/9UMRk/
A div has a margin-top of 50%. Which I would expect to adjust to the page height.
However, if you resize the window in Firefox (3 & 4), you'll see the div's vertical positioning is affected by the page width, but not the page height.
Why?
It does seem counter-intuitive, but is in fact in accordance to the box model for margins, which states, in the CSS level 2.1 spec:
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.
And in the CSS3 spec (more clearly IMO):
Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
(Bold emphases mine.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With