oops, I changed the min height from 508 to 608.
But that raises another question.
In your example, the 50% height of the float is based on the height of the body element. If I changed the min height of the body to 1000px, the height of the float is going to be 500px, no matter how small my viewport is. So that gap between the top of the page and the top of the wrapper box is always going to be (height of float) minus (the negative margin of float) no matter how small the viewport is. I understand that’s why the gap stays constant.
But if this logic applies, how come in the ‘search-this’ page by Paul-OB, in the first or second example he gave, the wrapper box disappears to the top?
Let’s take his second code:
<style type=“text/css”>
html,body{
height:100%;
margin:0;
padding:0;
}
body{
text-align:center;
min-width:626px;
min-height:1000px;
}
#vertical{
position:absolute;
top:50%;
margin-top:-198px;/* half main elements height*/
left:0;
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
</style>
</head>
<body>
<div id="vertical">
<div id="hoz">
<h1>Content goes here</h1>
</div>
</div>
</body>
</html>
Above, I changed the min-height to 1000px. So if the logic follows, because the top property of the vertical div is set to 50%, which to my understanding is 50% of the height of the body (1000px), the vertical div should be 500px below the top, and then minus it’s negative margin of 198px. And that should stay the same no matter how small the viewport becomes, because the body height will be 1000px at minimum no matter how small the viewport gets and the vertical div will always be 50% of that height (500px) minus 198px. It should stay constant no matter how small the window gets.
At first I thought the reason it disappears when the viewport gets smaller is because the ‘top’ property (which has a value of 50%) of the vertical div is based on the viewport size, and logically when the viewport gets smaller, the viewport height also gets smaller, which causes the value of ‘top:50%’ to get smaller as well. And when it eventually becomes smaller than the negative margin of -198px, it pulls the box above the page.
But then I realized it’s actually based on the body size, and the body size doesn’t change when the viewport gets smaller. So why does the content still disappear off the top of the page? Where did my logic go wrong?