Question

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?

Answer 1

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.)