Menu
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/
851
Percent-based margins are calculated using the width of the parent container, regardless of which side the margin is on. So you're seeing a margin-top equal to 50% of the width.
You can combine fixed value and percentage values in the CSS margin property. Negative values are allowed in the CSS margin property. When the value is provided as a percentage, it is relative to the width of the containing block. See also margin-top, margin-bottom, margin-left, and margin-right.
The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
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.
116
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
