margin-top percentage does not change when window height decreases
css, margin
Solution
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.
Problem
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/