Hi
I have a div that is 100% browser height and width, inside this div i have a h1. I want this heading to always have margin-top: 45% of the parent. But when i put the margin, its more like 45% of the entire page height. How do I do so the margin only applies to the headings parent?
I have a div that is 100% browser height and width, inside this div i have a h1. I want this heading to always have margin-top: 45% of the parent. But when i put the margin, its more like 45% of the entire page height.
If the parent is 100% height of the page,why isn’t 45% of the div also 45% of the page? I can’t see a difference.
*edit, the page is longer than the browser? if so, show some code. I’m wondering if you’re getting margin collapse and the space you’re seeing on the top is actually top margin now on the div instead.
I made a pen, and the margin i put on h1, pushes down the parent too it seems.
the margin i put on h1, pushes down the parent too it seems.
Sounds like margin collapse, which does exactly this (margin gets transferred to the parent/ancestors).
http://reference.sitepoint.com/css/collapsingmargins (there are some solutions you can try in here as well. I tend to give invisible top borders since I don’t worry about IE6 anymore).
Note that if you want to set html and body to 100%, then you pretty much only get one direct child you can set to height (or min-height) 100%, and therefore there should never be any more room for another direct child (like #filler) to exist.
http://pmob.co.uk/pob/hoz-vert-center.htm Might give you some ideas for vertical centering. Yes, it does need to be more than just a top margin on a child 
Heights and widths are calculated significantly differently, you essentially can’t use 100% height to any real effect in web design unless you’re trying to hide anything that would force a page scroll (in which case it’s just about perfect).
In this particular case position tags would probably be more useful on the parent element in question so you can bind it’s height to top:0px; bottom:0px; which gives you an expandable 100% height instead of having only 100% be the browser view window.
In the case of your demo you’ll notice that your header section is roughly the size of your iframe for the demo at 100% height and that the area above it should, in theory, be something like 45% of 100%+(100%+1000px) because the margin doesn’t actually have a calculated height to work in iirc and the last parent element with a calculated height is the div before the iframe whose height (360px) and is what the 100%s are seeing before expanding to fit internal content (because they’re not floated or position absolute the height expands without a max-height attribute). if you inspect the element and check the margin box display you’ll see your 45% is actually calculating out to around 774px, give or take a few, which is 45% of 1720px. So roughly what you’d expect from (360+360+1000)*1.45, otherwise known as resultant page height.
tl;dr % heights look to the last calculated parent with a set height and if there isn’t one doesn’t assign height, it’s horribly counter intuitive. Avoid them like the plague.
Thanks for the answer, now i’m trying to use absolute position top:0 , bottom: 0 , but the issue I’m having with this is how to make the next section of the page to start where is should and not on top of the absolute positioned one. Tips?
Hi,
Firstly let’s just clarify one thing and that is that percentage margins (even vertical margins) refer to the width of the containing block and have nothing to do with the height of the element at all. You can’t move an element to the vertical center using percentage margins.
Secondly you will need to clarify for me what you are trying to achieve as it s unclear from your code and the discussions above.
Are you trying to vertically center a div in the viewport or are you just trying to vertically center a header within a div?
In your code you set #header to have a height of 100% which you can’t really do as that means it will never expand (see CSS faq on 100% height). You would need min-height:100% instead so the element can grow. The min-height:100% on the header would then make the header extend to the bottom of the viewport which would seem to be too big for a header?
If you can clarify (or make a rough sketch) of what you want I’m sure we can offer much better ways to do this. Absolute positioning is unlikely to be what you want unless its for some sort of faux background effect. If indeed it is vertical centring you are looking for then the easiest solution is to use the display:table and table-cell properties (ie8+).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header {
height: 100%;
background: #ccc;
display:table;
width:100%;
}
h1 {
margin:0;
padding: 0;
text-align: center;
vertical-align:middle;
display:table-cell;
}
</style>
</head>
<body>
<div id="header">
<h1>Hello!</h1>
</div>
</body>
</html>
Note that height when used for display:table is always treated as a minimum so min-height is not required (or applicable here).