Div not showing when the page is resized

HTML & CSS
1

Hi everyone! I’m having an issue with a page layout I created, that will not display the header when the window is resized.

You can take a look at the layout at: http://6vdesign.com.ar/testing/

It might look well at first if your screen is big enough, but if you resize the window, only the lower part of the site will be shown, and the upper part will be cut off. The scrollbar won’t take you to the header div.

I believe the issue is caused by the method I used to center the div vertically in the page:

#container {
 	height: 775px;
	margin: auto;
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -387px;
	left: 50%;
	width: 100%;
	margin-left: -50%;
	background-color:#000;
}

If I remove the top and margin-top attributes, the header is displayed… but I really would like to center this page vertically. Can you help me have both a header and a vertically-centered page?

Thanks!

Vicky

2

The problem here is that AP’ing an element takes it out of the normal flow and as such it is not used for calculating its parent height ( which is why you cant scroll up). when the viewport is less than a particular amount the centering calculations from your #container rules end up being negative and pushing up the header off the top of the viewport ( which is why you cant see it).

A quick, tho not particularly legacy IE friendly solution, might be to give your HTML, BODY {min-height: 775px; } or larger.

Hope that helps.

3

Hi dresden_phoenix, thanks for your reply. I tried with min-height, but it just added the blank space below the footer, not on top. Really weird. In the end, I found that W3C suggests a different way of centering DIVs vertically: www.w3.org/Style/Examples/007/center

That seems to have done the trick, I still have to test for older browsers tho.

4

That is the method I would have favoured as well but support for display table-cell is VERY limited in IE. a potential work around is * html .container {display:inline}. But I have to admit i have never tried that IE work around with anything more complicated than a single element.