Vertical Centering in CSS... problem with small windows

[dcv]

I know there are various methods of vertical centering with CSS; the one I'm using is the relative position and negative margins method (i.e. shift the top margin back by half the height of the overall site container).

This works fine until you shrink down the size of the browser window, when the top of the site disappears (well obviously this is to be expected, if the [negative] margin is now greater than half the height of the window!) Just wondering how you get around this. Should I create a separate stylesheet with no vertical centering for smaller screen resolutions or is there some other 'hack'?

 

[Sdashiki]

min-height?

 

[dcv]

min-height?

Tried it but it still seems to hide the top when you shrink the browser window.

 

[Sdashiki]

have you tried it on each containing div?

do you use wrapper/container divs?

i.e. is your whole site in one div, and within it is all the content divs. within each content section is another div etc etc.

try different places for the min-height, trial and error could help.

otherwise, im outta ideas at the moment.

 

[dcv]

I originally had one overall wrapper div before I decided to implement the vertical centering. I've been developing on my 12" PowerBook so the site looked as though it was positioned okay, starting 30px from the top... then tried it out on my 20" iMac and realised it looked a little odd sitting near the top of the screen like that!

So in order to center the site vertically I've added an extra container div, set the top to 50% and pushed the top margin back by 1/2 the height of the wrapper div. I've tried setting min-height on both the wrapper and new container div but it makes little difference when shrinking the window. Thanks for your suggestions though. I'll have a play around with this some more but I think the problem is just due to the top negative margin setting.

I guess as long as it looks okay on an 800x600px resolution screen I shouldn't worry too much about smaller sizes. I only noticed the top was being pushed off the screen because at work I have a very small Opera window open for my web browsing etc

 

[dcv]

I've found this site as a possible alternative method for the vertical centering. It uses display:table to allow vertical-align:middle to be set, rather than the negative margins method. Might have a look into this later.

 

[Sdashiki]

I think the neg margins is definitely the problem, its just always going to happen that way.

Id try to find the workaround for the -neg margins before the vertical centering.

which, if you dont mind, can be accomplished with a table container.