Take the 2-minute tour ×

I have a div that I want to position at 10% below the beginning of the page. If I use this CSS rule:

   margin-top: 10%;

The div's computed margin-top is aprox. 192px (my screen resolution is 1920 x 1080) so all browsers I tested are using the page's width (rather than height) for calculating the value. How can I do to make them calculate using the height (suppose 1080px) using only CSS?

share|improve this question
Why not top: 10%? –  dfsq Apr 1 '13 at 15:22

2 Answers 2

up vote 6 down vote accepted

Using the width to calculate the percentage is correct behavior. You cannot set a margin based on a percentage of the height.

One possibility is to set position: absolute; top 10% on the element, or use JavaScript.


share|improve this answer
.. not to mention that using top is natural way to set the top position. –  dfsq Apr 1 '13 at 15:25
Thanks for answering. And do you know some way to change that behavior? –  Nico Rodsevich Apr 1 '13 at 15:29
@NicoRodsevich You mean this behavior? w3.org/TR/CSS2/box.html#margin-properties –  Explosion Pills Apr 1 '13 at 15:33
Yeah, that one... Thanks for the link, @ExplosionPills Enough of this, will use top from now on :/ –  Nico Rodsevich Apr 1 '13 at 15:44

The percentage is taken from the element that the div is wrapped in. You can instead use javascript or jQuery to set the height of the div in proportion to the page height.

$(window).height();   // returns height of browser viewport

$(document).height(); // returns height of HTML document

So you would do

var documentHeight = $(document).height();
var percentageHeight = documentHeight * .1;

$("#div-block").height(percentageHeight );
share|improve this answer
Tanks that works, but I'm wondering if there is a CSS-only way for doing this –  Nico Rodsevich Apr 1 '13 at 15:26
Not without setting absolute positioning - which I despise personally :) –  What have you tried Apr 1 '13 at 15:28
Yeah, I despise it too, but well, I'vs just changed my mind, that's the correct way of doing this, so... –  Nico Rodsevich Apr 1 '13 at 15:42

Your Answer


