Help min-height problem

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

hzgt9b - 24 Jan 2008 22:08 GMT

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.

QUESTIONS
1.    Does anyone know why the child-selector hack below causes the
vertical-align to stop working in FF, NN and Opera?
2.    Is there an easier way to vertically and horizontally center text
within a DIV?

Any suggestions as to how to achieve the goal of horz. and vert.
centering would be appreciated!

Here's the CSS & HTML that I'm using... your feedback appreciated.
<html>
<head>
<style>
.tableVerticalCenter
{
width: 100%;
height: 100%;
vertical-align: middle;
}
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;
}
</style>
</head>
<body>
<form>
<div id="container">
<div id="outer">
<table class="tableVerticalCenter">
<tr><td id="myCell">
Some text<br />1<br />2<br />3<br /

>4<br />end - overflow?

</td></tr>
</table>
</div>
<div id="otherDiv1">need vertical and horz aligned
text here too</div>
<div id="otherDiv2">need vertical and horz aligned
text here too </div>
</div>
</form>
</body>
</html>

Reply to this Message

aoksite1@gmail.com - 24 Jan 2008 23:57 GMT

> BACKGROUND
> I'm having a problem getting some text to be vertically and
[quoted text clipped - 71 lines]
> </body>
> </html>

URL???

Reply to this Message

hzgt9b - 25 Jan 2008 00:23 GMT

On Jan 24, 6:57 pm, "aoksi...@gmail.com" <aoksi...@gmail.com> wrote:

> > BACKGROUND
> > I'm having a problem getting some text to be vertically and
[quoted text clipped - 75 lines]
>
> - Show quoted text -

Its on a private network.. any suggestions where I could temp post it?

Reply to this Message

Ed Mullen - 25 Jan 2008 03:52 GMT

> Its on a private network.. any suggestions where I could temp post it?

If you truly cannot find a free Web host (can you spell "Google"?) email
me the files and I'll put them on my server so people here can evaluate
them and try to help you.

Signature

Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
In love the paradox occurs that two beings become one and yet remain
two. - Erich Fromm

Reply to this Message

hzgt9b - 25 Jan 2008 05:28 GMT

> > Its on a private network.. any suggestions where I could temp post it?
>
[quoted text clipped - 6 lines]
> In love the paradox occurs that two beings become one and yet remain
> two. - Erich Fromm

ouch... tough crowd! Ok then, try this link: http://www12.asphost4free.com/emailceloftis/

Reply to this Message

dorayme - 25 Jan 2008 06:07 GMT

In article
<6c91036e-26f2-46e4-89c9-af827b0e9ffc@k2g2000hse.googlegroups.com

> > > Its on a private network.. any suggestions where I could temp post it?
> >
[quoted text clipped - 11 lines]
> ouch... tough crowd! Ok then, try this link:
> http://www12.asphost4free.com/emailceloftis/

If you had taken up Ed's offer, you would not have gotten 134
errors of validation because he would never allow such a thing.
Ed is friendly enough but he is no pushover and he would be tough
with you to enable you to face the blowtorch to the belly that
innocents tend to get when they wander in here. <g>

Signature

dorayme

Reply to this Message

dorayme - 25 Jan 2008 00:55 GMT

In article
<5f2f42ab-727f-4e6b-9c61-14691a3f0aa8@i7g2000prf.googlegroups.com

[quotes full OP post]

> > </body>
> > </html>
>
> URL???

I don't know which is worse, someone giving masses of code in a
post and no url or someone quoting same and asking for one?

Signature

dorayme

Reply to this Message

John Hosking - 25 Jan 2008 01:14 GMT

> In article
> <5f2f42ab-727f-4e6b-9c61-14691a3f0aa8@i7g2000prf.googlegroups.com
[quoted text clipped - 7 lines]
> I don't know which is worse, someone giving masses of code in a
> post and no url or someone quoting same and asking for one?

It's a case of the blind (mis)leading the blind.

Signature

John
Reminding you all about the UIP: http://improve-usenet.org/

Reply to this Message

rf - 25 Jan 2008 06:23 GMT

> BACKGROUND
> I'm having a problem getting some text to be vertically and
[quoted text clipped - 16 lines]
> (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?

Signature

Richard.

Reply to this Message

hzgt9b - 25 Jan 2008 16:39 GMT

> > BACKGROUND
> > I'm having a problem getting some text to be vertically and
[quoted text clipped - 65 lines]
>
> - Show quoted text -

Richard,
Thanks for the great explination.

> As to the height of the table, the spec, in relation to percentages, says:
>
[quoted text clipped - 6 lines]
> 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...

Reply to this Message

Jeff - 25 Jan 2008 07:04 GMT

> BACKGROUND
> I'm having a problem getting some text to be vertically and
> horizontally centered/aligned inside a div.

Have you considered not specifying a height and just adding the same top
and bottom padding?

Since you are using javascript to populate these, you could go back
in later and adjust the padding if you require a minimum height.

This is, of course, not exactly what you want to do, but it may give
you some new ideas.

Jeff

Actually, its three

> separate DIVs going flowing down the page vertically. Each of DIVs
> will have its innerHTML populated dynamically from a database. The
[quoted text clipped - 68 lines]
> </body>
> </html>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2008

Help min-height problem