How to center vertically ?

[FL]

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

[e n | c k m a]

> but I'm trying to center vertically a box, any idea to solve this?

can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know. even then, how do you know it'll be
effective? can't you live without it?

[FL]

e n | c k m a wrote:

but I'm trying to center vertically a box, any idea to solve this?

can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know. even then, how do you know it'll be
effective? can't you live without it?

I can, my boss can't ;o)
The (ugly) way to do this is create 5 frames, 4 empty on each side and
the main that receive the content but I don't like frames...
I can't see any good reason to be able to center a box horizontally and
not vertically

[PeterMcC]

FL <ml**@mangoosta.fr> wrote in
<bv***********@biggoron.nerim.net>

e n | c k m a wrote:

but I'm trying to center vertically a box, any idea to solve this?

can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know. even then, how do you know it'll be
effective? can't you live without it?

I can, my boss can't ;o)
The (ugly) way to do this is create 5 frames, 4 empty on each side and
the main that receive the content but I don't like frames...
I can't see any good reason to be able to center a box horizontally
and not vertically

If a combination of elements that is ugly, deprecated, invalid, uses tables
for layout but doesn't use frames is any more acceptable - try a table with
a single cell
<td valign="middle" align="center">

That "works" when the table is set to a height of 100% - it *doesn't*
validate, though I've just checked that it does center vertically and
horizontally in IE 5x/6 Opera 7 Mozilla 1.6 and Netscape 7.1

Example at http://informer.postmaster.co.uk/index.html (nothing to do with
me, BTW)

I guess it depends on how much say the boss gets - I'm afraid that sometimes
the choice for me is informed by the question as to who pays, w3c or the
boss. Perhaps you're braver than me in standing up for truth, justice and
coding standards :)

There is a css method that requires that you know the dimensions of the
centered material. You position the material in a div which has its top left
corner at the middle of the screen - positioned top:50% and left:50% - and
then set negative margins for top and left at half the height and width of
the div. That puts the top left corner half the div's height above the
vertical center and half the div's width to the left of the horizontal
center - and so the center of the div is at the center of the window. Breaks
if the div is bigger than the window - you can't scroll left or up to see
the hidden material :(

http://www.wpdfd.com/editorial/thebox/deadcentre4.html
I'd still give talking the boss out of it a go - even if the site works now,
it's going to be a nightmare to maintain and adapt to new requirements, it
imposes severe limitations as to content... and it's a very bad thing for
which you will have to do penance. Your children will ask, "Why are those
people pointing at you in the street?"and you will have to tell them what
you did when you were young and sold your soul for a mess of pottage.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Els]

PeterMcC wrote:

FL <ml**@mangoosta.fr> wrote in
<bv***********@biggoron.nerim.net>

e n | c k m a wrote:

but I'm trying to center vertically a box, any idea to solve this?
can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know. even then, how do you know it'll be
effective? can't you live without it?

I can, my boss can't ;o)
The (ugly) way to do this is create 5 frames, 4 empty on each side and
the main that receive the content but I don't like frames...
I can't see any good reason to be able to center a box horizontally
and not vertically

If a combination of elements that is ugly, deprecated, invalid, uses tables
for layout but doesn't use frames is any more acceptable - try a table with
a single cell
<td valign="middle" align="center">

That "works" when the table is set to a height of 100% - it *doesn't*
validate,

it does, if you put the 100% height in the css file

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[PeterMcC]

Els <el***********@tiscali.nl.invalid> wrote in
<40**********************@dreader2.news.tiscali.nl >

PeterMcC wrote:

FL <ml**@mangoosta.fr> wrote in
<bv***********@biggoron.nerim.net>

e n | c k m a wrote:

> but I'm trying to center vertically a box, any idea to solve this?
can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know. even then, how do you know it'll
be effective? can't you live without it?

I can, my boss can't ;o)
The (ugly) way to do this is create 5 frames, 4 empty on each side
and the main that receive the content but I don't like frames...
I can't see any good reason to be able to center a box horizontally
and not vertically

If a combination of elements that is ugly, deprecated, invalid, uses
tables for layout but doesn't use frames is any more acceptable -
try a table with a single cell
<td valign="middle" align="center">

That "works" when the table is set to a height of 100% - it *doesn't*
validate,

it does, if you put the 100% height in the css file

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

IIRC 100% is not a valid height for a table - the cited example has
height:580px and the vertical centring trick only works with height:100%
--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Els]

PeterMcC wrote:

Els <el***********@tiscali.nl.invalid> wrote in
<40**********************@dreader2.news.tiscali.nl >

PeterMcC wrote:

FL <ml**@mangoosta.fr> wrote in
<bv***********@biggoron.nerim.net>

e n | c k m a wrote:
>>but I'm trying to center vertically a box, any idea to solve this?
>
>
>can't be done without some kind of client-side scripting language
>(JavaScript) - as far as I know. even then, how do you know it'll
>be effective? can't you live without it?

I can, my boss can't ;o)
The (ugly) way to do this is create 5 frames, 4 empty on each side
and the main that receive the content but I don't like frames...
I can't see any good reason to be able to center a box horizontally
and not vertically
If a combination of elements that is ugly, deprecated, invalid, uses
tables for layout but doesn't use frames is any more acceptable -
try a table with a single cell
<td valign="middle" align="center">

That "works" when the table is set to a height of 100% - it *doesn't*
validate,

it does, if you put the 100% height in the css file

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

IIRC 100% is not a valid height for a table - the cited example has
height:580px and the vertical centring trick only works with height:100%

oh...
well, in that case, look at this one:
http://home.tiscali.nl/~elizabeth/testonecelltable.html
I think it can be done with any height, as long as it's
specified. Being a percentage, or px or em.

Works in IE6.0, NS7.1, Moz. 1.4, Firebird 0.6.1 and in Opera
versions 7.01 and 7.23.

Almost forgot: valid html4.01 strict.

Hope this helps the op :-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[Els]

Els wrote:

PeterMcC wrote:

Els wrote:

PeterMcC wrote:

FL wrote:

> e n | c k m a wrote:
>
>>> but I'm trying to center vertically a box, any idea to solve this?
>>
>> can't be done without some kind of client-side scripting language
>> (JavaScript) - as far as I know. even then, how do you know it'll
>> be effective? can't you live without it?
>
> I can, my boss can't ;o)
> The (ugly) way to do this is create 5 frames, 4 empty on each side
> and the main that receive the content but I don't like frames...
> I can't see any good reason to be able to center a box horizontally
> and not vertically

If a combination of elements that is ugly, deprecated, invalid, uses
tables for layout but doesn't use frames is any more acceptable -
try a table with a single cell
<td valign="middle" align="center">

That "works" when the table is set to a height of 100% - it *doesn't*
validate,

it does, if you put the 100% height in the css file

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

IIRC 100% is not a valid height for a table - the cited example has
height:580px and the vertical centring trick only works with height:100%

oh...
well, in that case, look at this one:
http://home.tiscali.nl/~elizabeth/testonecelltable.html
I think it can be done with any height, as long as it's specified. Being
a percentage, or px or em.

Works in IE6.0, NS7.1, Moz. 1.4, Firebird 0.6.1 and in Opera versions
7.01 and 7.23.

Almost forgot: valid html4.01 strict.

BTW: 100% height for a tabel in CSS isn't invalid. I just
checked with the CSS Validator of W3C.
But it doesn't 'work' with Opera or Gecko, until you give
the body AND html a 100% height as well.

Someone else already made an example of this, to be found at
http://karlcore.com/100pcttable/100pctcsswithdtd.php
--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[DU]

FL wrote:

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

<style type="text/css" media="all">
#TheBoxToCenterVertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:absolute;
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>
<div id="Container">
<div id="TheBoxToCenterVertically">inline or block stuff here</div>
</div>

will center vertically TheBoxToCenterVertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.

DU

[DU]

DU wrote:

FL wrote:

Hi Everyone,

I know howto center a block using margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

<style type="text/css" media="all">
#TheBoxToCenterVertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:absolute;

It should be
position:fixed;
instead!
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>
<div id="Container">
<div id="TheBoxToCenterVertically">inline or block stuff here</div>
</div>

will center vertically TheBoxToCenterVertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.

DU

Argh... this will in fact center within the document, not within the
viewport. There is a wide and common bug on this. Only Opera 7.x gets
this right. Sorry! It should be position:fixed and not position:absolute.

DU

[PeterMcC]

DU <dr*******@hotWIPETHISmail.com> wrote in
<bv**********@news.eusc.inter.net>

FL wrote:

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

<style type="text/css" media="all">
#TheBoxToCenterVertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:absolute;
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>
<div id="Container">
<div id="TheBoxToCenterVertically">inline or block stuff here</div>
</div>

will center vertically TheBoxToCenterVertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.

That's odd, the bit where the CSS negative margin method was mentioned
earlier in the thread seems to have been lost; same with the bit that said
it "breaks if the div is bigger than the window - you can't scroll left or
up to see the hidden material"

;)

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Els]

PeterMcC wrote:

DU wrote:

FL wrote:

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

[snip code using css negative margins]
will center vertically TheBoxToCenterVertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.

That's odd, the bit where the CSS negative margin method was mentioned
earlier in the thread seems to have been lost; same with the bit that said
it "breaks if the div is bigger than the window - you can't scroll left or
up to see the hidden material"

;)

Nah, it didn't get lost, it's still there.
But this is not the same thread, or more accurate, it's not
the same branch of the thread ;-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[PeterMcC]

Els <el***********@tiscali.nl.invalid> wrote in
<40**********************@dreader2.news.tiscali.nl >

PeterMcC wrote:

DU wrote:

FL wrote:

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?
[snip code using css negative margins]
will center vertically TheBoxToCenterVertically in any/all CSS2
compliant browsers regardless of current browser viewport
dimensions.

No javascript. No table design. No nested tables. No frames. No
ugly, deprecated, obsolete, invalid stuff. No non-sense tricks or
complex hack. No kidding.

That's odd, the bit where the CSS negative margin method was
mentioned earlier in the thread seems to have been lost; same with
the bit that said it "breaks if the div is bigger than the window -
you can't scroll left or up to see the hidden material"

;)

Nah, it didn't get lost, it's still there.
But this is not the same thread, or more accurate, it's not
the same branch of the thread ;-)

So it is - it was the reference to "ugly, deprecated, obsolete, invalid
stuff" that looked familiar.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[DU]

PeterMcC wrote:

DU <dr*******@hotWIPETHISmail.com> wrote in
<bv**********@news.eusc.inter.net>

FL wrote:

Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

<style type="text/css" media="all">
#TheBoxToCenterVertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:absolute;
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>
<div id="Container">
<div id="TheBoxToCenterVertically">inline or block stuff here</div>
</div>

will center vertically TheBoxToCenterVertically in any/all CSS2
compliant browsers regardless of current browser viewport dimensions.

No javascript. No table design. No nested tables. No frames. No ugly,
deprecated, obsolete, invalid stuff. No non-sense tricks or complex
hack. No kidding.

That's odd, the bit where the CSS negative margin method was mentioned
earlier in the thread seems to have been lost; same with the bit that said
it "breaks if the div is bigger than the window - you can't scroll left or
up to see the hidden material"

;)

Sorry about that.
That page
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
by the way has a problem. Every div in that page is absolutely
positioned and won't work accordingly in Opera 7.x. If the page has
non-abs. pos. elements before and after the centered div, then it won't
work in opera 7.x. In any case, the problem is that both MSIE 6 and
Mozilla have a bug on abs. pos. elements:

"Bug 105286: viewport used as containing block for absolutely positioned
elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

"A positioned element should be positioned to the nearest containing
positioned element, not the containing element."
http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing block)"

So an abs. pos. child of the body element should be positioned regarding
the document, not the viewport according to W3C. AFAIK, only Opera 7.x
avoids this bug.

My solution (with position:fixed) will work for Opera 7.x and
Mozilla-based browsers and it will work if the document (or positioned
div) exceeds browser viewport dimensions.

DU

[Lauri Raittila]

In article e n | c k m a wrote:

but I'm trying to center vertically a box, any idea to solve this?
can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know.

That is totally untrue. CSS has many ways to do that.
http://www.student.oulu.fi/~laurirai/www/css/middle/

The problem is that IE has so little support for things. Min-height is
pretty much crusial when using different unit for centered element and
paret. There is workarounds for it though.
even then, how do you know it'll be effective?
Or more importantly, can you know it won't be defective?
can't you live without it?

Living whithout it is often best option.

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

[DU]

Lauri Raittila wrote:

In article e n | c k m a wrote:

but I'm trying to center vertically a box, any idea to solve this?

can't be done without some kind of client-side scripting language
(JavaScript) - as far as I know.

That is totally untrue. CSS has many ways to do that.
http://www.student.oulu.fi/~laurirai/www/css/middle/

The problem is that IE has so little support for things. Min-height is
pretty much crusial when using different unit for centered element and
paret. There is workarounds for it though.

Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element (the initial containing block is the containing block
of such abs. pos. element; that's clearly, word for word, explained in
section 10.1 of CSS2
http://www.w3.org/TR/CSS21/visudet.h...-block-details
). Now, the root element is not the browser viewport; it's the document
per se. So, Opera 7.x renders your case correctly: it is MSIE 6, Mozilla
and others which renders this wrong. I can document this with quotes
from W3C CSS2 and W3C CSS2.1. W3C also consistently repeats that the
positioning context for fixed elements is the viewport; that is NOT the
case for absolute positioning. Same with bugzilla:
"Bug 105286: viewport used as containing block for absolutely positioned
elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
positioned elements before and/or after the Container div. It works even
if the positioned Container div becomes wider/longer than the viewport.

DU
-------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head profile="http://www.ietf.org/rfc/rfc2731.txt">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="DC.subject" content="Center vertically a box">
<meta name="DC.date.created" content="2004-02-02T09:54:03+11:00"
scheme="W3CDTF">
<meta name="DC.date.modified" content="2004-02-02T09:54:03+11:00"
scheme="W3CDTF">

<title>Center vertically a box in the viewport</title>

<style type="text/css" media="screen,tv,projection">
#TheBoxToCenterVertically
{
width:356px;
height:124px;
background-color:yellow;
}

#Container
{
position:fixed;
/* no hack for MSIE for now */
top:50%;
left:50%;
margin-top:-62px;
margin-left:-178px;
}
</style>
</head>

<body>

<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<div id="Container">
<div id="TheBoxToCenterVertically">inline or block stuff here</div>
</div>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
<p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>

</body></html>

[Fran�ois de Dardel]

On 2004-02-05 14:48:28 +0100, Els <el***********@tiscali.nl.invalid> said:

>but I'm trying to center vertically a box, any idea to solve this?

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

-- Els
Mente humana é como pára-quedas; funciona melhor aberta.

I like your Portuguese signature, els.

But your Etretat page is not centered vertically. Not in my setup anyway
(1024 x 820). If I increase it to 1280 x 1024, I can see the whole window,
but the pict is still not vertically centered.

Macintosh, Safari or Netscape 7.1.

François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze

[Lauri Raittila]

In article DU wrote:

Lauri Raittila wrote:

CSS has many ways to do [vertical centering].
http://www.student.oulu.fi/~laurirai/www/css/middle/

Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element
I don't use absolute position relative to body on that page, so I wonder
what you mean. In fact, container is always relatively positioned, so ICB
confusion is not needed to be considered. If you use absolute position
way to center things in body, you of course also use height:100%, so that
it will take height of viewport (OTOH, it is arguable if 100% should be
height of viewport - but I have already forgotten if I was against or for
that, would need to read specs again.)

I wonder why everybody always think that vertical centering is only used
related to viewport. IMHO it hardly ever makes sence to center something
on viewport (even if I have pointed out how to do it many times). I have
no idea weather OP meaned it or not as OP didn't say.
Now, the root element is not the browser viewport;
That is clear.
it's the document per se. So, Opera 7.x renders your case correctly:
it is MSIE 6, Mozilla and others which renders this wrong. I can
document this with quotes from W3C CSS2 and W3C CSS2.1. W3C also
consistently repeats that the positioning context for fixed elements
is the viewport; that is NOT the case for absolute positioning. Same
with bugzilla: "Bug 105286: viewport used as containing block for
absolutely positioned elements instead of root (percentage height,
%, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
positioned elements before and/or after the Container div. It works even
if the positioned Container div becomes wider/longer than the viewport.

You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars. That is IMNSHO very
stupid indeed. It would be much better if centering would not happen when
centered thing is longer than viewport. I would use display:table method,
as if browser don't understand min-width, it will still work, or degrade
nicely.

Anyway, you should use max-height:100% and overflow:auto with
position:fixed elements, so that content would not be unaccessible.
--
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.

[DU]

Lauri Raittila wrote:

In article DU wrote:

Lauri Raittila wrote:

CSS has many ways to do [vertical centering].
http://www.student.oulu.fi/~laurirai/www/css/middle/

Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element

I don't use absolute position relative to body on that page, so I wonder
what you mean.

This is your last section:
"Using absolute positioning and negative margin"
no?

In fact, container is always relatively positioned, so ICB confusion is not needed to be considered. If you use absolute position
way to center things in body, you of course also use height:100%, so that
it will take height of viewport (OTOH, it is arguable if 100% should be
height of viewport - but I have already forgotten if I was against or for
that, would need to read specs again.)
height:100% for an abs. pos. element which is a child of the body is
relative to the document (root element), not the viewport. Again,
section 10.1 of CSS2.1 is utterly clear on what is implied for abs. pos.
elements.

I wonder why everybody always think that vertical centering is only used
related to viewport.
Well, I fail to see what usage you could find in positioning an element
in the middle of the document (when the document overflows the
viewport). That would mean that sometimes you see the positioned
element, sometimes you don't; you would need to scroll down/up the
document view to see that abs. pos.

IMHO it hardly ever makes sence to center something on viewport (even if I have pointed out how to do it many times).
You can replace frames entirely with positioning relative to viewport.
Sidebar, footer, fixed nav. blocks etc... are doable without any frames.

I have no idea weather OP meaned it or not as OP didn't say.

Now, the root element is not the browser viewport;

That is clear.

it's the document per se. So, Opera 7.x renders your case correctly:
it is MSIE 6, Mozilla and others which renders this wrong. I can
document this with quotes from W3C CSS2 and W3C CSS2.1. W3C also
consistently repeats that the positioning context for fixed elements
is the viewport; that is NOT the case for absolute positioning. Same
with bugzilla: "Bug 105286: viewport used as containing block for
absolutely positioned elements instead of root (percentage height,
%, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

The addendum works for Mozilla 1.6, Opera 7.50 with or without non-abs.
positioned elements before and/or after the Container div.

It works even
if the positioned Container div becomes wider/longer than the viewport.

You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars.

W3C does not define canvas in that manner. What you say is not clear. Say:
div#idText {position:absolute; top:-250px; left:-500px;}
Now, this idText won't be reachable, accessible with scrollbars:
depending on your definition of canvas, you would say that this idText
is not part of the canvas since you can't reach it with scrollbars while
the W3C says: "the space where the formatting structure is rendered; the
canvas is infinite for each dimension of the space."
"The canvas is the entire 'surface' on which the document is laid out."
So, I'm not sure why this idText would not part of the canvas the way
W3C defines it.

That is IMNSHO very stupid indeed. It would be much better if centering would not happen when
centered thing is longer than viewport. I would use display:table method,
as if browser don't understand min-width, it will still work, or degrade
nicely.

Anyway, you should use max-height:100% and overflow:auto with
position:fixed elements, so that content would not be unaccessible.

overflow:auto makes sense but I fail to see why max-height is needed or
height:100% is needed. The demopage I provided works and it works IMO
according to the way W3C defined position:absolute, containing blocks
and position:fixed.

DU

[Els]

Fran�ois de Dardel wrote:

On 2004-02-05 14:48:28 +0100, Els <el***********@tiscali.nl.invalid> said:

>>>>but I'm trying to center vertically a box, any idea to solve this?

example:
http://www.mediatech.nl/~rachel/Rachel/bp/Etretat7.html
css: http://www.mediatech.nl/~rachel/Rachel/bp.css

But your Etretat page is not centered vertically. Not in my setup anyway
(1024 x 820). If I increase it to 1280 x 1024, I can see the whole
window, but the pict is still not vertically centered.

Macintosh, Safari or Netscape 7.1.

It is here, (pc), I don't have a Mac to test.
Could you please make a printscreen for me and upload it
somewhere or send it to me?

I'd be grateful :-)

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.
Another one, for François:
Sonhos vem. Sonhos vão. O resto é imperfeito.
-Renato Russo-

[PeterMcC]

DU <dr*******@hotWIPETHISmail.com> wrote in
<bv**********@news.eusc.inter.net>

Sorry about that.
No, my misunderstanding :)
That page
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
by the way has a problem. Every div in that page is absolutely
positioned and won't work accordingly in Opera 7.x. If the page has
non-abs. pos. elements before and after the centered div, then it
won't work in opera 7.x. In any case, the problem is that both MSIE 6
and Mozilla have a bug on abs. pos. elements:

"Bug 105286: viewport used as containing block for absolutely
positioned elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

"A positioned element should be positioned to the nearest containing
positioned element, not the containing element."
http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial
containing block)"

So an abs. pos. child of the body element should be positioned
regarding the document, not the viewport according to W3C. AFAIK,
only Opera 7.x avoids this bug.

My solution (with position:fixed) will work for Opera 7.x and
Mozilla-based browsers and it will work if the document (or positioned
div) exceeds browser viewport dimensions.

I'll revisit it and try it out though I'll confess that I suspect that there
isn't a satisfactory solution - principally because, if there were, there'd
be thousands of sites out there crippling their content and function for the
sole benefit of floating in the middle of the window.
--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Lauri Raittila]

In article DU wrote:

Lauri Raittila wrote:

In article DU wrote:

Lauri Raittila wrote:

CSS has many ways to do [vertical centering].
http://www.student.oulu.fi/~laurirai/www/css/middle/

Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element

I don't use absolute position relative to body on that page, so I wonder
what you mean.

This is your last section:
"Using absolute positioning and negative margin"
no?

No. There is div with position:relative that contains absolutely
positioned element. The absolutely positioned element is positioned
relative to that div. So weather we agree on how ICB is handled is
irrelevant.

I wonder why everybody always think that vertical centering is only used
related to viewport.

Well, I fail to see what usage you could find in positioning an element
in the middle of the document (when the document overflows the
viewport). That would mean that sometimes you see the positioned
element, sometimes you don't; you would need to scroll down/up the
document view to see that abs. pos.

Why on earth it should be positioned middle of document? That would be
even dumber. What I mean is that you sometimes have reason to have
something positioned in the middle of some fixed height element.

Think that you have background image that looks good at some height. You
propably want to position text in the middle of it.
IMHO it hardly ever makes sence to center something

on viewport (even if I have pointed out how to do it many times).
You can replace frames entirely with positioning relative to viewport.
Sidebar, footer, fixed nav. blocks etc... are doable without any frames.

I can see no reason to do that in first place. Replacing frames with
similar stuff is almost as bad idea as frames per se. Often worse.

You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars.

W3C does not define canvas in that manner. What you say is not clear. Say:
div#idText {position:absolute; top:-250px; left:-500px;}
Now, this idText won't be reachable, accessible with scrollbars:
depending on your definition of canvas, you would say that this idText
is not part of the canvas since you can't reach it with scrollbars while
the W3C says: "the space where the formatting structure is rendered; the
canvas is infinite for each dimension of the space."
"The canvas is the entire 'surface' on which the document is laid out."
So, I'm not sure why this idText would not part of the canvas the way
W3C defines it.

I don't care how W3 defines it. It still is inaccessible. I defined
canvas myself exactly because I didn't mean it the way W3 does it.
overflow:auto makes sense but I fail to see why max-height is needed or
height:100% is needed.
Well, if you centered thing is bigger than viewport, it doesn't not help
to have scrollbar in it, as it still is bigger than viewport.
The demopage I provided works and it works IMO
according to the way W3C defined position:absolute, containing blocks
and position:fixed.

Yes it does. That no way means it is not problem. Just because something
is rendered correctly by spec does not mean it makes some sence.

I think you are misunderstood everything I have said because you have so
strong opinion that my understanding of ICB is wrong. The problem is that
question about ICB is irrelevant when talking about my page.

And your example is simply unaccessible in not high enaugh window. Of
course in your example it is not really problem, as centered element is
not very tall. But potential problem is big. Think that someone takes
your example and actually uses it to position her 82 line poem in the
middle of page. Then think someone using big fonts and relatively low
window.

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

[DU]

Lauri Raittila wrote:

In article DU wrote:

Lauri Raittila wrote:

In article DU wrote:
Lauri Raittila wrote:
>CSS has many ways to do [vertical centering].
>http://www.student.oulu.fi/~laurirai/www/css/middle/

Your page is interesting. Your last section is wrong though. When one
abs. pos. a child element of the body, the positioning element becomes
the root element
I don't use absolute position relative to body on that page, so I wonder
what you mean.
This is your last section:
"Using absolute positioning and negative margin"
no?

No. There is div with position:relative that contains absolutely
positioned element. The absolutely positioned element is positioned
relative to that div. So weather we agree on how ICB is handled is
irrelevant.

I wonder why everybody always think that vertical centering is only used
related to viewport.

Well, I fail to see what usage you could find in positioning an element
in the middle of the document (when the document overflows the
viewport). That would mean that sometimes you see the positioned
element, sometimes you don't; you would need to scroll down/up the
document view to see that abs. pos.

Why on earth it should be positioned middle of document?

That is what people do in a number of demo pages actually. Because the
document is as long as the viewport, then they assume that abs. pos. is
relative to viewport. Here's one:
http://nontroppo.org/test/Op7/position1.html

That would be even dumber.
This is another ball game. Relevancy and/or usage in a webpage context
is a different issue. It seems that right now, you and I do not even
agree that position:absolute will position a child element of the body
within the document while position:fixed will position a child element
of the body within the viewport. I'm telling you again that the CSS2
technical recommendation is utterly clear, shining clear on this issue.
Opera 7.x gets it right; Mozilla 1.x gets it wrong.

What I mean is that you sometimes have reason to have something positioned in the middle of some fixed height element.

Think that you have background image that looks good at some height. You
propably want to position text in the middle of it.

IMHO it hardly ever makes sence to center something

on viewport (even if I have pointed out how to do it many times).
You can replace frames entirely with positioning relative to viewport.
Sidebar, footer, fixed nav. blocks etc... are doable without any frames.

I can see no reason to do that in first place. Replacing frames with
similar stuff is almost as bad idea as frames per se. Often worse.

That's certainly debatable. Sidebar, footer, nav. blocks fixed in the
viewport are appearing in webpages now. "Authors may use fixed
positioning to create frame-like presentations."
http://www.w3.org/TR/CSS2/visuren.ht...ed-positioning
The usabilities burden, javascript dependency and problems arisen with
frames (which are well documented) disappear when using
fixed-in-the-viewport blocks. Anyway, this is again another topic.

You mean the thing is centered, but part of it will be outside canvas.
Canvas meaning area you can see using scrollbars.

W3C does not define canvas in that manner. What you say is not clear. Say:
div#idText {position:absolute; top:-250px; left:-500px;}
Now, this idText won't be reachable, accessible with scrollbars:
depending on your definition of canvas, you would say that this idText
is not part of the canvas since you can't reach it with scrollbars while
the W3C says: "the space where the formatting structure is rendered; the
canvas is infinite for each dimension of the space."
"The canvas is the entire 'surface' on which the document is laid out."
So, I'm not sure why this idText would not part of the canvas the way
W3C defines it.

I don't care how W3 defines it. It still is inaccessible. I defined
canvas myself exactly because I didn't mean it the way W3 does it.

overflow:auto makes sense but I fail to see why max-height is needed or
height:100% is needed.

Well, if you centered thing is bigger than viewport, it doesn't not help
to have scrollbar in it, as it still is bigger than viewport.

The demopage I provided works and it works IMO
according to the way W3C defined position:absolute, containing blocks
and position:fixed.

Yes it does. That no way means it is not problem. Just because something
is rendered correctly by spec does not mean it makes some sence.

My post was oriented toward how specs distinguish, separate and define
how these position:absolute and position:fixed should work. Whether web
authors do a fine job of designing a page with such knowledge or not is
a different matter. My post was about specs, not about how design meets
specific webpage requirements.
As far as I'm concerned, many people are still assuming there is a bug
with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
specs (1) and even bugzilla (2) clearly indicate it is not the case.

DU
--
(1)http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing block)"
Also, the explanations and examples given in section 10.1 of CSS2.1 are
shining clear about these important distinctions.
"the box is fixed with respect to the viewport"
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
"Fixed positioning is a subcategory of absolute positioning. The only
difference is that for a fixed positioned box, the containing block is
established by the viewport."
http://www.w3.org/TR/CSS2/visuren.ht...ed-positioning
(2)"Bug 105286: viewport used as containing block for absolutely
positioned elements instead of root (percentage height, %, bottom)"
http://bugzilla.mozilla.org/show_bug.cgi?id=105286

[Lauri Raittila]

In article DU wrote:

This is another ball game. Relevancy and/or usage in a webpage context
is a different issue. It seems that right now, you and I do not even
agree that position:absolute will position a child element of the body
within the document while position:fixed will position a child element
of the body within the viewport. I'm telling you again that the CSS2
technical recommendation is utterly clear, shining clear on this issue.
Opera 7.x gets it right; Mozilla 1.x gets it wrong.
I have used Opera 7 all the time. Well, I only used 7.0 beta 1 for
testing.
My post was oriented toward how specs distinguish, separate and define
how these position:absolute and position:fixed should work. Whether web
authors do a fine job of designing a page with such knowledge or not is
a different matter. My post was about specs, not about how design meets
specific webpage requirements.
Yes. You accused that my last case was incorrect:

"Your page is interesting. Your last section is wrong though."

But couldn't point how. You thought that ICB had something to do with it,
but it hasn't.

Your example was not good in practice, and you didn't point it out, so I
did that. I have posted similar example here about 1.5 years ago, and I
didn't understand the problem with it then.
As far as I'm concerned, many people are still assuming there is a bug
with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
specs (1) and even bugzilla (2) clearly indicate it is not the case.

I'm not. I think Opera 7 has done this correctly all the time about ICB.
But the problem you see on my site where I say Opera is buggy and mozilla
is not is not about ICB, but absolutely positioned element in relatievly
positioned container, that is defined even clearer.


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

[Karl Smith]

DU <dr*******@hotWIPETHISmail.com> wrote:

http://www.w3.org/TR/2003/WD-CSS21-2...suren.html#q28
"The containing block for a positioned box is established by the nearest
positioned ancestor (or, if none exists, the initial containing block)"

So an abs. pos. child of the body element should be positioned regarding
the document, not the viewport according to W3C. AFAIK, only Opera 7.x
avoids this bug.

That is correct. (Opera avoided this bug by never inventing it, Since
CSS positioning was first included in Opera, they've been the only
ones to get this detail correct.)

But the way you phrase that, by referring to, "an abs. pos. child of
the body," may be misleading. The first element to be absolutely
positioned will be positioned relative to the initial containing box,
not the viewport, but that may be the BODY element or the HTML
element. And if an author assumes that it is the BODY, that assumption
may be wrong.

The initial containing box, IIRC, is the first box in the rendering
model to have a value for "display" other than "none".[1] And the
rendering model is created by reconciling the document tree with the
stylesheet in use. And the stylesheet in use is created by cascading
stylesheets from author, user, and browser.

In plain English, if I have a user stylesheet that always displays the
META tags (I do, BTW), my initial containing box will always be HTML,
never BODY. So, if the author asssumes an initial containing box of
BODY, their absolutely positioned element may be displaced upwards?
Would these be appropriate for authors with a genuine use for absolute
positioning?

html { display: block !important }
head { display: none !important }

[1] Or a value for "content" other than "" (That's content in the
rendering model, not the content of the document model.)???

--
Karl Smith.

[DU]

Lauri Raittila wrote:

In article DU wrote:

This is another ball game. Relevancy and/or usage in a webpage context
is a different issue. It seems that right now, you and I do not even
agree that position:absolute will position a child element of the body
within the document while position:fixed will position a child element
of the body within the viewport. I'm telling you again that the CSS2
technical recommendation is utterly clear, shining clear on this issue.
Opera 7.x gets it right; Mozilla 1.x gets it wrong.

I have used Opera 7 all the time. Well, I only used 7.0 beta 1 for
testing.

My post was oriented toward how specs distinguish, separate and define
how these position:absolute and position:fixed should work. Whether web
authors do a fine job of designing a page with such knowledge or not is
a different matter. My post was about specs, not about how design meets
specific webpage requirements.

Yes. You accused that my last case was incorrect:

"Your page is interesting. Your last section is wrong though."

I said that this was your last section:

"Using absolute positioning and negative margin"

Is that true? Is this how you described your last section? Yes? No? I
hope I won't need to upload a screen shot ...

But couldn't point how. You thought that ICB had something to do with it,
but it hasn't.

I certainly thought you posted an example of an absolutely positioned
element with a negative margin.
Your example was not good in practice, and you didn't point it out, so I
did that. I have posted similar example here about 1.5 years ago, and I
didn't understand the problem with it then.

As far as I'm concerned, many people are still assuming there is a bug
with Opera 7.x and no bug with Mozilla regarding pos. abs. when the
specs (1) and even bugzilla (2) clearly indicate it is not the case.

I'm not. I think Opera 7 has done this correctly all the time about ICB.
But the problem you see on my site where I say Opera is buggy and mozilla
is not is not about ICB, but absolutely positioned element in relatievly
positioned container, that is defined even clearer.

absolutely positioned element in relatievly positioned container: that's
an importantissimo detail here. Yes, said that way and written that way,
it is much clearer.

:)

DU

[FL]

> Hi Everyone,

I know howto center a block using
margin-left: auto ;
margin-right: auto ;

but I'm trying to center vertically a box, any idea to solve this?

Thanks to all of you, now I have a lot of stuff to learn and I'll try
all the given tips but I still consider that W3c should have done
something simpler :-)

[Lauri Raittila]

In article DU wrote:

Lauri Raittila wrote:

In article DU wrote:
Yes. You accused that my last case was incorrect:

"Your page is interesting. Your last section is wrong though."

I said that this was your last section:

"Using absolute positioning and negative margin"

Is that true? Is this how you described your last section? Yes? No? I
hope I won't need to upload a screen shot ...

I still fail to see your point.
I certainly thought you posted an example of an absolutely positioned
element with a negative margin.

Hm. Whats the problem with absolutely positioned thing and negative
margin?

I'm not. I think Opera 7 has done this correctly all the time about ICB.
But the problem you see on my site where I say Opera is buggy and mozilla
is not is not about ICB, but absolutely positioned element in relatievly
positioned container, that is defined even clearer.

absolutely positioned element in relatievly positioned container: that's
an importantissimo detail here. Yes, said that way and written that way,
it is much clearer.

Well, it doesn't really make much sence to include all information in
heading. It is made clear in content that it is actually relatively
positioned with container. At least I think it is.

What actually is not as clear is if it should center thing if:

html {height:100%;}
body {height:10em;margin-top:-5em;top:50%;position:absolute}

I think it should be centered.
--
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.