How can I prevent the browser's width from affecting the vertical position of text?

Question

I have the following HTML and CSS

<body>
<p>Foo Foo Foo</p>
</body>

p {
    font-size: 50px;
    font-weight: 600;
    margin-top: 20%;
}

If you were to open this code in a browser, decreasing the browser's width would make the text move upwards. What is the easiest way to avoid this?

This is related to your question and might answer it: http://stackoverflow.com/questions/7266363/margin-top-percentage-does-not-change-when-window-height-decreases — Richard Haber, Apr 20 '13 at 17:59
Thank you, @RichardHaber – the link in the accepted answer was very resourceful. (http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties) — zch, Apr 20 '13 at 18:09
Have you seen the viewport units (vw, vh, vmin)? http://caniuse.com/#feat=viewport-units — cimmanon, Apr 20 '13 at 18:52
@cimmanon I had not but thank you for commenting – that is a really interesting post. — zch, Apr 22 '13 at 02:25

score 1 · Answer 1 · answered Apr 20 '13 at 18:01

The margin-top value is computed based on the width of the viewport (screen window).

You need to use another relative unit like em or an absolute unit like px.

It depends in part on the effect you are trying to create.

See Reference: http://www.w3.org/TR/CSS2/box.html#margin-properties

score 1 · Accepted Answer · answered Apr 20 '13 at 18:07

I assume you can do nothing about it. Even if you do something to make it work(like making container an inline element) it would be a hack.

The percentage is calculated with respect to the width of the generated box's containing block. This is true for 'margin-top' and 'margin-bottom' as well.

How can I prevent the browser's width from affecting the vertical position of text?

2 Answers2