Centered CSS

[Jocab]

How can I center a page (that uses CSS) so that it has:
- maximum width of 1024
- minimum width of 800
Therefore it should be a liquid design. I haven't found any way in
doing this, not using tables. Yes, it can be done using one table, see
http://www.quirksmode.org/css/centering.html
but is there no way to do it without a table in strict XHTML?

I'm baffled :)

[Els]

Jocab wrote:

How can I center a page (that uses CSS) so that it has:
- maximum width of 1024
- minimum width of 800
Therefore it should be a liquid design. I haven't found any way in
doing this, not using tables. Yes, it can be done using one table, see
http://www.quirksmode.org/css/centering.html
but is there no way to do it without a table in strict XHTML?

I'm baffled :)

Do you want it vertically centered?
The table in abovementioned example is there only for the
vertical centering.
Horizontal centering isn't a problem with css.
Your maximum width of 1024 is your choice, but the minimum
width of 800 will given a scrollbar even in 800x600 screens.
Besides, a lot of people like have their browser windows
smaller than that, even if their screen is bigger.
So don't define a minimum width, unless you have to for some
layout reason, but then make it way less than 800.
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Brian]

Jocab wrote:

How can I center a page (that uses CSS) so that it has:
- maximum width of 1024
- minimum width of 800
Therefore it should be a liquid design.

That's a strange definition of liquid design. How about designing for
any width?

http://www.allmyfaqs.com/faq.pl?AnySizeDesign

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Lauri Raittila]

In article Jocab wrote:

How can I center a page (that uses CSS) so that it has:
- maximum width of 1024
- minimum width of 800
Hm. You mean the centered are will have those limits?

html {height:100%;di splay:table;min-width:800px;
max-width:1024px;ma rgin:auto;}
body {display:table-cell;vertical-align:middle;}

Or something like that.

Does not work on IE, but that is probably irrelevant as you use XHTML,
but I don't see any reason for min/max widths in px unit I assumed from
your numbers.
Therefore it should be a liquid design.
No, it wont be. I practically never use 800px or wider browser window. No
problems, exept some idiots that think everybody has at least 800px wide
area in browser where their page would be rendered.

How about those people that use 1600*1200 resolution in their 17" box,
and also 25px normal font size?
I haven't found any way in doing this, not using tables.

I haven't found any reason to do that.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Jocab]

On Sun, 22 Feb 2004 22:45:00 GMT, Brian
<us*****@juliet remblay.com.inv alid> wrote:

That's a strange definition of liquid design. How about designing for
any width?

http://www.allmyfaqs.com/faq.pl?AnySizeDesign

Well, let me be a little clearer. What I want is a page with a minimum
resolution of 800 pixels (this is just an example), centered, which
works in IE also. If the width were fixed at 800 px, then it won't be
a problem. But I would like it to have max-width hof let's say 1024 or
1280. Because I have a 1600 screen, and an 800 page looks silly in
such a resolution. Moreover, if I don't set a max (or fixed) width, on
1600 the page is waaaaaaaaay too large and it looks very ugly. Is my
reasoning wrong?

[Els]

Jocab wrote:

On Sun, 22 Feb 2004 22:45:00 GMT, Brian
<us*****@juliet remblay.com.inv alid> wrote:

That's a strange definition of liquid design. How about designing for
any width?

http://www.allmyfaqs.com/faq.pl?AnySizeDesign

Well, let me be a little clearer. What I want is a page with a minimum
resolution of 800 pixels (this is just an example), centered, which
works in IE also. If the width were fixed at 800 px, then it won't be
a problem. But I would like it to have max-width hof let's say 1024 or
1280. Because I have a 1600 screen, and an 800 page looks silly in
such a resolution. Moreover, if I don't set a max (or fixed) width, on
1600 the page is waaaaaaaaay too large and it looks very ugly. Is my
reasoning wrong?

not really, except for the minimum width :-)
Why don't you use a percentage for the left and right margins?
Let's say 10% on each side, container div of 80% in the
middle. See if that does what you want :-)
In addittion you can set a minimum width of let's say 600px,
but that won't work in IE.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Neal]

On Mon, 23 Feb 2004 08:10:03 GMT, Jocab <jo**@jo-nospam.com> wrote:

On Sun, 22 Feb 2004 22:45:00 GMT, Brian
<us*****@juliet remblay.com.inv alid> wrote:

That's a strange definition of liquid design. How about designing for
any width?

http://www.allmyfaqs.com/faq.pl?AnySizeDesign

Well, let me be a little clearer. What I want is a page with a minimum
resolution of 800 pixels (this is just an example), centered, which
works in IE also. If the width were fixed at 800 px, then it won't be
a problem. But I would like it to have max-width hof let's say 1024 or
1280. Because I have a 1600 screen, and an 800 page looks silly in
such a resolution. Moreover, if I don't set a max (or fixed) width, on
1600 the page is waaaaaaaaay too large and it looks very ugly. Is my
reasoning wrong?

Check out the page design at htmldog.com and tell me if it won't work in
all the viewport sizes you listed and then some.

[Jocab]

On Mon, 23 Feb 2004 03:49:36 -0500, Neal <ne*****@spamrc n.com> wrote:

Check out the page design at htmldog.com and tell me if it won't work in
all the viewport sizes you listed and then some.

Sure it does. But it has no minimum width. It looks nice in 1600*1200
but my site won't have that much content so won't look nice...

[Jocab]

On Mon, 23 Feb 2004 09:37:02 +0100, Els <el*********@ti scali.nl>
wrote:

not really, except for the minimum width :-)
Why don't you use a percentage for the left and right margins?
Let's say 10% on each side, container div of 80% in the
middle. See if that does what you want :-)
In addittion you can set a minimum width of let's say 600px,
but that won't work in IE.

Well wouldn't it be possible to have the left and right navs be fixed
(ie 200px). And the middle content relative? I don't think it is
possible.. I'm talking about a 3-column site, with a min-width of 800
and a max-widht of 1024, centered...

[Els]

Jocab wrote:

On Mon, 23 Feb 2004 09:37:02 +0100, Els <el*********@ti scali.nl>
wrote:

not really, except for the minimum width :-)
Why don't you use a percentage for the left and right margins?
Let's say 10% on each side, container div of 80% in the
middle. See if that does what you want :-)
In addittion you can set a minimum width of let's say 600px,
but that won't work in IE.

Well wouldn't it be possible to have the left and right navs be fixed
(ie 200px). And the middle content relative? I don't think it is
possible..

I don't see why not?
You are talking about a centered page, in which the left and
righ columns have fixed width, and the middle stretches with
the width of the browser, and the total of the 3 together
are not allowed to exceed 1024px wide.

No problem at all, as long as you don't expect it to stop at
1024px wide in IE.
I'm talking about a 3-column site, with a min-width of 800
and a max-widht of 1024, centered...

Again, the min-width is unrealistic. Even 800x600 screens
can't show 800 wide without a scrollbar.

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -