Centering

[Erik Schulp]

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
[e-mail]

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

[Nikolaos Giannopoulos]

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
[e-mail]

-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]

Nikolaos Giannopoulos wrote:

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 ?
<div id="wrap">
<div id="wrapit">
...
</div>
</div>

and in CSS:

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

margin: auto would suffice
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. 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. :(

#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.

--
Brian
follow the directions in my address to email me

[Nikolaos Giannopoulos]

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]

Nikolaos Giannopoulos wrote:

Brian wrote:

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?

Not sure I get your question. The words are clear enough, but not the
sense. One determines the value according to the need. My personal
site uses a max-width of 55em. I don't want it centered, so width is
auto. Thus, at smaller window sizes, the content just rewraps.
I can see possibly setting the margin in em's
I actually don't set margins in em units. But then, neither do you,
if I am to believe what you write below!
but it doesn't seem natural to me to set the width in em's....
em units are based on the font size, so they are the best unit to set
width for any container that contains all or mostly text.
Personally I like explicitly specifying the width when centering as I
*easily* know how much screen space is being used
Sure, if you use percentages. I don't use percentages for width, I
use em units. But if you use anything other than percentage, then you
run the risk of horizontal scroll bars at narrow window widths.
Setting the max-width to 98% fixes that -- except that MSIE/Win
doesn't recognize max-width. Three solutions: (1) leave it, and know
that MSIE users may have a less-than-ideal situation; (2) use
percentage for width; (3) set the margins to a width instead of auto,
and set the width to auto instead of a value. You can use percentage
or pixels if you like, as you are aware.

margin: auto 30px
What's the benefit of setting the margin in em's though?
None. I was merely providing other options for the op.
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.

There is some disagreement in ciwas. I don't use it. Or rather, I
have yet to see a need for it. Pixels for margin works fine for me.
We recently had a discussion about this, where other(s) thought em
units made more sense. Percentage would work also, if they are kept
small, but I have never used them.

--
Brian
follow the directions in my address to email me

[Brian]

Nikolaos Giannopoulos wrote:

Brian wrote:

Nikolaos Giannopoulos wrote:

My personal site uses a max-width of 55em.
How did you come up with 55em? Trial and error I imagine - Right?

To some degree, yes. As discussed in a thread in ciwas many months
ago, usability studies suggest that reading very long lines of text is
difficult. The reader can lose her/his place when moving to the next
line of text. So I merely wanted to suggest a presentation that would
not have very long lines of text.
What if you wanted to double the existing margin on both sides
sometime down the road - would that be 50em, 52em, 53em????
Only a right margin is specified on the body element at this time.
But sure, I could change that width if it were desirable. You make
this sound like a terrible thing. I don't regard making changes in a
single css file a huge obstacle. Indeed, it is necessary to change
that file to change the layout. We seem to be talking past each other
here.
If you use percentages for the width then I think the intent is
clearer
The intent is clearer? What is unclear about em units?
and so is maintaining the pages down the road.
If I set a width in percentages, and wanted to change it down the
road, I'd have to make the same sort of edit of the same css file.

I can see possibly setting the margin in em's

I actually don't set margins in em units. But then, neither do
you, if I am to believe what you write below!

I said I can see doing it - I didn't say that I would do it.

Fair enough. But I hope you can understand my confusion. When I say
"I can see..." I mean, it seems sensible, I might do the same in
certain situations.
You suggested the following options in your reply to my post:

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

I did indeed write that. Some people like to set margin with em
units. I never have, but I hardly think it is such a terrible idea
that the op should avoid it all costs. I see no usability problems in
the general principle of using em units for margin. YMMV.

em units are based on the font size, so they are the best unit to
set width for any container that contains all or mostly text.

I agree with your comment on what em units are but I disagree with
the rest of your statement - especially the wording "best unit to
set width for any container that contains all or mostly text".

I guess I'll ask the same question - Why would I want the width of
the page to get larger/smaller based on a large font and vice
versa?

You have changed what I said in a subtle way, possibly because my
earlier post made things vague. In the part quote above, I said em
was the best unit for a text container, e.g.,

<ul class="navigation">
<li>home</li>
<li><a href="gallery.html">photo gallery</a></li>
<li><a href="statement.html">artist statement</a></li>
<li><a href="contact.html">contact the artist</a></li>
</ul>

ul.navigation {
width: 10em ;
float: left ;
}

If the body element is a text container, and it usually is, then the
caveats that I mentioned about page width apply.
If the page is liquid then why would I even desire such an effect.
I did suggest setting a width in em units, *with a max-width set as
well*, and I also added the caveat that max-width fails in MSIE/Win.
I then presented another suggesting avoiding width altogether. My
earlier post may have been unclear. To set a width on the body
element, a percentage is likely the safest bet with MSIE/Win.

But if you use anything other than percentage, then you run the
risk of horizontal scroll bars at narrow window widths.
Yes. As I mentioned.
Say goodbye to your nice liquid layout and hello to jello ;-)
I don't know what the jello thing means. But I am curious. An acronym?
Maybe if you post the url to your site
< http://www-unix.oit.umass.edu/~btrembla/ >
that uses the 55em width then things can be discussed more
concretely as we could simply try it out with different font sizes
and see the results.
I think you didn't read what I wrote, even though you quoted it above.
I set *max-width* to 55em on the body element of my site, and *not*
the width. In MSIE/Win, max-width is ignored. No harm done. Look at
what you quoted if you don't believe me! :-p

Setting the max-width to 98% fixes that -- except that MSIE/Win
doesn't recognize max-width.

Unfortunately considering market share this is huge problem isn't
it.

I did point that out in my post, with an alternative solution.
Not to mention that it seems like this additional setting is a
kludge to fix a problem when there need not be a problem to fix (if
one sticks to percentages) - or so it seems IMO.
Max-width is not a kludge. It is a standard part of css.

Three solutions: (1) leave it, and know that MSIE users may have
a less-than-ideal situation;

what solution is (1)?????

<sigh> One can design a site that is functional and accessible in
less-conforming browsers, and that has added presentational features
in more conforming browsers. The whole point of css is to add
visual/aural/... usability and appeal for those browsers that
understand it. Lynx ignores my stylesheet, graphical browsers
(mostly) do not. I make my stylesheet for visitors who use graphical
browsers like MSIE, which gets some of css. I put some things in that
MSIE/Win users will not get, but that enhance the site further for
Mozilla and Opera users.

div#content {
width: 95% ;
max-width: 55em ;
}

/* the following rule is ignored by MSIE/Win */
body>div#content {
width: 55em ;
max-width: 98% ;
}

This is only a hypothetical case. Without content, I cannot explain
why someone would want it. It depends on the context.

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

None. I was merely providing other options for the op.

Once again we agree but IMO I think that there are additional
disadvantages as mentioned above by myself and yourself.

It depends on the need and the wishes of the author. I see no
usability problems with margin set in em units. If you can think of
one, then point it out.
But you do use it but you may not realize it - Whether you set the
width in em's / margin auto (as I believe is your preference)
My preference is not to center pages. Frankly, I don't get the
obsession with centering everything. Again, that's me.
OR width auto and margin in em's I think you are still going to hit
a problem except the effect is reversed i.e. in the former case the
width of the content area will grow with a larger font and in the
latter case it will shrink with a larger font.

Yes. Mind you, in the latter case, there is no threat of the dreaded
horizontal scroll bars.

--
Brian
follow the directions in my address to email me

[Nikolaos Giannopoulos]

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

[Brian]

Nikolaos Giannopoulos wrote:

Brian wrote:

Nikolaos Giannopoulos wrote:

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.

That would have been daft, it's true.
My apologies.

No foul. :)

--
Brian
follow the directions in my address to email me