Centering vertically and horizontally

[ingela]

Hi,
I'm trying to find out how to center my webpages both vertically and horizontally. I'm trying to use the "negative margins solution". Right now the problem is that when the window is too small it's impossible to scroll up and to the left. This leaves out a lot of users from being able to look at our pages. www.plainvanilla.se I've seen so many other users asking about this when searching for solutions, but I still haven't been able to manage to adapt for my pages.

The CSS as it looks right now:

#mainContent {
width: 960px;
position: absolute;
visibility: visible;
margin-left: -480px;
margin-top: -340px;
left: 50%;
top: 50%;
z-index: 1;
background-color: #000000;
}

Would really appreciate some feedback on this. Thanks.

[sticks464]

You can do it without negative margins but you must set a height for the container.
#mainContent {
width: 960px;
height:680px;
position: absolute;
visibility: visible;
margin-left: 480px;
margin-top: 340px;
left: 50%;
top: 50%;
background-color: #000000;
}

[ingela]

Thanks, but I just tried to take away the negative margins and added height but this made the page end up far away from centered. Maybe there's something more I need to change?

Today I changed the width to 840 px instead of 960 px to allow for more users to see my pages since I can't get this centering to work - but I would still love to know how to solve the problem.

[gizmo]

ingela, have a look here http://www.wpdfd.com/editorial/thebox/deadcentre4.html

[ingela]

Thanks for the link to the dead centre page, I've been there before... When I resize that window the text at the top "This text is" - is no longer visible and cannot be reached by scroll either (same goes for the content on the left side). I thought this was due to the same problem as I have - but maybe it's not?

[gizmo]

That's very strange, what browser are you using ? I have pushed and poked that page around in various browsers and apart from a scroll bar appearing, nothing I have tried breaks it.

[webStruck_]

hi :) maybe you can try this, replacing the whole body and #mainContent:

body {
background-color:#000000;
border:0pt none;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
margin:0 auto;
text-align:center;}

#mainContent {
background-color:#000000;
margin:0 auto;
width:840px;}

[ingela]

That's very strange, what browser are you using ? I have pushed and poked that page around in various browsers and apart from a scroll bar appearing, nothing I have tried breaks it.

I'm getting this effect in IE 6.0. I thought it was the same kind of problem that I've had - but maybe it's not. I tried dead centre on my Mac as well and even if the effect is different in different browsers I was still able to see the top text. So maybe I should try to apply the dead centre solution to my code and see if it works. My main issue is to get the menu visible by scrolling and I don't want to give up the "total centering" of the page :) . Thanks and I'll let you know if I manage to adapt the pages to your solution.

[ingela]

hi :) maybe you can try this, replacing the whole body and #mainContent:

Thanks. I tried this, but then I don't get the page totally centered - that is -it's stuck to the top... Maybe I did something wrong?

[gizmo]

IE6 is the culprit, from looking at people's problems on here, it would appear to be the worst browser that IE has ever produced. Can you not install the Mozilla browser?

[sticks464]

My apologizes, my code this morning was wrong. Negative margins are what you want. I am viewing your page on FF and IE6 on a 19" and 17" monitor with 1280 X 1024 resolution and it appears centered horizontally and vertically on both with no scrollbars.