Centering

Hi all,

I am trying to get a CSS defined layout to center on the page, have
tried doing this with the <center></center> tags but than everything
is centered, including text etc etc.

What should I put into the stylesheet so that, no matter what
resolution the viewer's screen is set to, the layout is always
displayed centered ?
Erik Schulp
www.sgtclog.nl
eschulp@-houjerotzooimaar-home.nl

-Let's all hope there is intelligent life on other planets,
cuz' here on earth, there is bugger all!- *Monty Python*

Erik Schulp wrote:

Hi all,

I am trying to get a CSS defined layout to center on the page, have
tried doing this with the <center></center> tags but than everything
is centered, including text etc etc.

What should I put into the stylesheet so that, no matter what
resolution the viewer's screen is set to, the layout is always
displayed centered ?
Erik Schulp
www.sgtclog.nl
eschulp@-houjerotzooimaar-home.nl

-Let's all hope there is intelligent life on other planets,
cuz' here on earth, there is bugger all!- *Monty Python*

Have you tried wrapping your content in something like:

<div id="wrap">
<div id="wrapit">
...
</div>
</div>

and in CSS:

#wrap {text-align: center}
#wrapit {text-align: left; margin: auto auto; width: 100%}

The wrap is needed to address an IE5 bug - wrapit is used for conforming
browsers wherein the margin: auto (for at least left and right) and the
explicit width help center the content.

HTH.

--Nikolaos

Brian wrote:

Nikolaos Giannopoulos wrote:

#wrap {text-align: center}
#wrapit {text-align: left; margin: auto auto; width: 100%}

margin: auto would suffice

Sure. That's one of those things were I had specific values (for
top/bottom) and didn't collapse them after switching to auto. Thanks.

The wrap is needed to address an IE5 bug - wrapit is used for
conforming browsers wherein the margin: auto (for at least left and
right) and the explicit width help center the content.

Note that width set to 100%, the div won't be centered, it will extend
from one side of the window to the other.

In our real page I have a width of 93% - just tried to simplify it for
posting though but that wasn't a good idea - once again thanks for the
correction.

I'd recommend setting a width
in em units, and set a max-width to avoid horizontal scroll bar, but
max-width doesn't work with MSIE 5.x.

How would you determine the value to specify the width in em units? I
can see possibly setting the margin in em's but it doesn't seem natural
to me to set the width in em's....

#wrap {
text-align: center;
}
#wrapit {
text-align: left;
margin: auto;
width: 55em;
max-width: 95%;
}

You could set the width to auto and specify a margin instead.

#wrap {
text-align: center;
}
#wrapit {
text-align: left;
margin: auto 5% ;
}

or margin: auto 2em or auto 5px or whatever suits you.

Personally I like explicitly specifying the width when centering as I
*easily* know how much screen space is being used.

What's the benefit of setting the margin in em's though?

Do you really want the margin to be larger based on a larger font size -
this may be a silly question but I just don't see why such a situation
is desireable.

--Nikolaos

Brian wrote:

Nikolaos Giannopoulos wrote:

My personal site uses a max-width of 55em.

I think you didn't read what I wrote, even though you quoted it above.

Ahhhhh!!!! I see. Your right ;-)

I set *max-width* to 55em on the body element of my site, and *not*
the width.

Funny how mis-reading the prefix "max-" above in your comment (twice)
can make such a huge difference. My apologies.

--Nikolaos