Help min-height problem

Giganews Newsgroups
Subject: Help min-height problem
Posted by:  hzgt9b (celoft…@gmail.com)
Date: Thu, 24 Jan 2008

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>

Replies