Re: Help min-height problem

"hzgt9b" <celoftis (AT) gmail (DOT) com> wrote

BACKGROUND
I'm having a problem getting some text to be vertically and
horizontally centered/aligned inside a div. Actually, its three
separate DIVs going flowing down the page vertically. Each of DIVs
will have its innerHTML populated dynamically from a database. The
data may be long AND contain multiple lines (<br/>) - so the DIVs need
to be able to grow as needed. For simplicity sake, I'll just talk
about 1 DIV from now on...


I approached this problem by thinking I would
1. Set the text-align of the DIV to be text-align:center;
2. Nest a table inside the DIV, set the cell to be vertical-align:
middle;
This approach was looking good until I started testing with enough
text to overflow the DIV's initial height of 100px. So, I chased down
a few solutions to the min-height problem and tried implementing them
- actually they all worked... well, almost. For all the hacks the DIV
will now grow as needed but in FireFox 2.x, Netscape 9.x, Opera 9.2x
(but not IE) the DIV looses its vertical-align: middle;...and that's
where I am stuck.

With reference to your now published test page:

QUESTIONS
1. Does anyone know why the child-selector hack below causes the
vertical-align to stop working in FF, NN and Opera?

According to the spec vertical-align only applies to inline-level and
"table-cell" elements. IE is getting this wrong, the table should *not* be
vertically aligned.

As to the height of the table, the spec, in relation to percentages, says:

"Specifies a percentage height. The percentage is calculated with respect to
the height of the generated box's containing block. If the height of the
containing block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value computes
to 'auto'."

Note, *height* of containing block, not min-height.

So, since there is no height specified for the containing block the 100%
defaults to auto, being the height of the tables content. So, even if you
vertical-align the cells content it won't make any difference as the table,
and therefore the cell, is not as high as the div.

If you do give that div a height then the table will expand to fill the div
and the cell will too. The text will then be centred, not because you have
specified vertical-align for the table, rather because vertical-align:
center is the default for table cells.

However now if the text is higher than 100px it will, correctly, escape out
of the bottom of the div. The div will not expand (in modern browsers which
does not include IE) because you have told it to be 100px high.

You can see how slippery all of this is getting? HTML/CSS was never really
intended to *vertically* specify stuff. The intent is to let the browser
quitely work things out for itself.

2. Is there an easier way to vertically and horizontally center text
within a DIV?

The question is: why do you want do? Why do you need blank space above and
below that text?

--
Richard.

On Jan 25, 1:23 am, "rf" <r... (AT) invalid (DOT) com> wrote:

"hzgt9b" <celof... (AT) gmail (DOT) com> wrote in message

news:885b1a08-9973-4ae8-821d-b28b5a650c35 (AT) h11g2000prf (DOT) googlegroups.com...





BACKGROUND
I'm having a problem getting some text to be vertically and
horizontally centered/aligned inside a div. Actually, its three
separate DIVs going flowing down the page vertically. Each of DIVs
will have its innerHTML populated dynamically from a database. The
data may be long AND contain multiple lines (<br/>) - so the DIVs need
to be able to grow as needed. For simplicity sake, I'll just talk
about 1 DIV from now on...

I approached this problem by thinking I would
1. Set the text-align of the DIV to be text-align:center;
2. Nest a table inside the DIV, set the cell to be vertical-align:
middle;
This approach was looking good until I started testing with enough
text to overflow the DIV's initial height of 100px. So, I chased down
a few solutions to the min-height problem and tried implementing them
- actually they all worked... well, almost. For all the hacks the DIV
will now grow as needed but in FireFox 2.x, Netscape 9.x, Opera 9.2x
(but not IE) the DIV looses its vertical-align: middle;...and that's
where I am stuck.

With reference to your now published test page:

QUESTIONS
1. Does anyone know why the child-selector hack below causes the
vertical-align to stop working in FF, NN and Opera?

According to the spec vertical-align only applies to inline-level and
"table-cell" elements. IE is getting this wrong, the table should *not* be
vertically aligned.

As to the height of the table, the spec, in relation to percentages, says:

"Specifies a percentage height. The percentage is calculated with respect to
the height of the generated box's containing block. If the height of the
containing block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value computes
to 'auto'."

Note, *height* of containing block, not min-height.

So, since there is no height specified for the containing block the 100%
defaults to auto, being the height of the tables content. So, even if you
vertical-align the cells content it won't make any difference as the table,
and therefore the cell, is not as high as the div.

If you do give that div a height then the table will expand to fill the div
and the cell will too. The text will then be centred, not because you have
specified vertical-align for the table, rather because vertical-align:
center is the default for table cells.

However now if the text is higher than 100px it will, correctly, escape out
of the bottom of the div. The div will not expand (in modern browsers which
does not include IE) because you have told it to be 100px high.

You can see how slippery all of this is getting? HTML/CSS was never really
intended to *vertically* specify stuff. The intent is to let the browser
quitely work things out for itself.

2. Is there an easier way to vertically and horizontally center text
within a DIV?

The question is: why do you want do? Why do you need blank space above and
below that text?

--
Richard.- Hide quoted text -

- Show quoted text -

Richard,
Thanks for the great explination.

As to the height of the table, the spec, in relation to percentages, says:

"Specifies a percentage height. The percentage is calculated with respect to
the height of the generated box's containing block. If the height of the
containing block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value computes
to 'auto'."

So, since there is no height specified for the containing block the 100%
defaults to auto, being the height of the tables content.

Actually I had specified the *height* of the "containing block", div
id="outer". The CSS for this element is:
div#outer
{
border: solid 2px red;
/****/ height: 100px; /****/
text-align:center;
font-weight:bold;
font-size:110%;
}
div>#outer /* here's the hack - child selector ignored by <=
IE 6.0 */
{
min-height:100px;
height:auto;
}
but for browsers that understand child selectors (i.e. "modern
browsers") the height height:100px is replaced with height:auto.
Regardless, I understand your explination, thanks.

The question is: why do you want do? Why do you need blank space above and
below that text?
I need for the text in the divs to appear vertically centered because

that's what my client wants. I could always tell the client that's not
really what they want but I'm not quite to that point yet...

As for the others I was trying to avoid a javascript or padding
approach but I may be forced in that direction...