Question

I am working on a project in which the client wants the navigation <div> to align according to the screen height, similar to how margin-left as a percentage works when screen width is decreased.

So, I gave margin-top: 20% and navigation <div> displays that margin, but when I decrease the height of the window it does not adjust according the screen height although it works when I decrease the screen width.

My question is not how can I achieve that, but why does the percentage work horizontally and not vertically?

Here is an example: http://jsfiddle.net/sandeep/5VReY/

Answer 1

The percentage works on the width of the container block, according to the css specifications

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.

See w3.org for more information.