Center content in big div

[nate51]

I am working on a side scrolling project and am having trouble with centering the individual pages content. I made each stage 2000px in width and my body has an assigned width so they can stack side by side instead of one on top of the other.

Below is a link to see a demo of the site. Can anyone help me figure out how to center the contents according to the browser size? I tried using percentages in my CSS but it's using the body instead of each stage div to place itself.

Click Here for the demo site (http://www.nateweb.ca/test/test.html)

[molendijk]

You can position a div, without giving it values for width and height, by simultaneously using top / bottom and left / right values. For instance:
<div style="position: absolute; left:50px; top: 50px; right: 50px; bottom: 50px; background: red">
<div style="position: absolute; left:200px; top: 200px; right: 200px; bottom: 200px; background: yellow">Some text</div>
</div>
===
Arie Molendijk.

[Minos]

something like text-align:center in the stage divs' css?

[nate51]

You can position a div, without giving it values for width and height, by simultaneously using top / bottom and left / right values. For instance:
<div style="position: absolute; left:50px; top: 50px; right: 50px; bottom: 50px; background: red">
<div style="position: absolute; left:200px; top: 200px; right: 200px; bottom: 200px; background: yellow">Some text</div>
</div>
===
Arie Molendijk.

Hey Arie, thanks for the tip, I changed things up a bit. I added a container div in the center that holds the contents and made it absolute with a top, left, right and bottom of 25% and it centers in IE, FF and Chrome everytime. Your suggestion of changing it to absolute and creating equal amounts on all sides, turned the light on in my head.

[nate51]

Spoke to soon, when I apply the container div to all the pages, all their contents get dragged onto the first stage. They are using my browser window and not each stage div to place themselves. I am still stuck on finding a solution. I just want the background color to fill but have the contents in the center align right in the dead center and not scale.

[nate51]

something like text-align:center in the stage divs' css?

Does not work.

[molendijk]

Spoke to soon, when I apply the container div to all the pages, all their contents get dragged onto the first stage. They are using my browser window and not each stage div to place themselves. I am still stuck on finding a solution. I just want the background color to fill but have the contents in the center align right in the dead center and not scale.
Try using pixels instead of percentages. If that doesn't help, give me a link to the problematic pages + comments.
===
Arie.

[itivae]

I would say it sounds like a % problem too. Got a link to your site?

[nate51]

@molendijk @itivae link is in first post. I am starting to assume it's not common practice to layout the content in the center of the div as all the horizontal scrolling sites I have seen seem to snap the content to the top left, even if it looks centered it's more dominant to the top left and does not scale when the browser is re sized.

[molendijk]

The link in the first post is what you tried right from the beginning, so I can't see why my idea doesn't work.
===
Arie.

[nate51]

@molendjk Sorry about that, I forgot to upload and was viewing off my desktop.

Click Here for new demo (http://www.nateweb.ca/test/test3.html)

As you can see it helps to make the first stage fit your screen perfectly, but I had to change the pixels to percentages as it was not centering the content, and it causes the second stage to go wacky, because originally the second stage is using the same attributes to fill the screen so it has to do it where the red stage is. So I had to manually shift it over which made it loose the background color.

[molendijk]

There seems to be a problem indeed.
I'll look at it as soon as I've got some time (to morrow, probably).
===
Arie.

[nate51]

@molendijk No rush, I am just going to use static pixel placement, that seems to be the norm for this style of website. But I will continue looking into dead center placement as I can always use it on a future project and pass along what I find out to Dynamicdrive forums.