5 Replies Latest reply on May 16, 2006 7:18 PM by bicycleyguy

    Table with auto-expanding left and right column?


      Hi,

      I want a table with 1 row x 3 columns. Is there a way to have the left and right columns auto-expand while the centered column stays in the center of the browser at a fixed width? I would also like this table to stay centered vertically in the browser window.

      Thanks,

      Greg
        • 1. Re: Table with auto-expanding left and right column?
          Level 7
          bicycleyguy wrote:

          > Hi,
          >
          > I want a table with 1 row x 3 columns. Is there a way to have the left and
          > right columns auto-expand while the centered column stays in the center of the
          > browser at a fixed width? I would also like this table to stay centered
          > vertically in the browser window.


          This will work in most modern browsers, apart from MacIE5x.


          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          " http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <title>Vertically Centered Table</title>
          <style type="text/css">
          html, body {
          height:100%;
          margin: 0;
          padding: 0;
          text-align: center;
          font-family: verdana, arial, helvetica, sans-serif;
          font-size: 11px;
          }
          #container {
          height:100%;
          vertical-align: middle;

          }
          #centerCol {
          width: 400px;
          background-color:#FFFFCC;
          }
          .col1, .col2 {
          background-color: #FFCC66;
          }
          #nested td {
          vertical-align: top;
          }

          </style>
          </head>

          <body>
          <table id="container" width="100%" border="0" cellspacing="0"
          cellpadding="0">
          <tr>
          <td>
          <table id="nested" width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
          <td class="col1">
          <p>This column will widen and narrow as the the width of the browser
          window changes</p>
          <p>This column will widen and narrow as the the width of the browser
          window changes</p>
          <p>This column will widen and narrow as the the width of the browser
          window changes</p>
          </td>
          <td id="centerCol">
          <p>The center column will stay at 400px wide no matter if the browser
          window is widened or narrowed.</p>
          <p>The center column will stay at 400px wide no matter if the browser
          window is widened or narrowed.</p>
          <p>The center column will stay at 400px wide no matter if the browser
          window is widened or narrowed.</p></td>
          <td class="col2">
          <p>This column will widen and narrow as the the width of the browser
          window changes</p>
          <p>This column will widen and narrow as the the width of the browser
          window changes</p>
          <p>This column will widen and narrow as the the width of the browser
          window changes</p></td>
          </tr>
          </table>
          </td>
          </tr>
          </table>
          </body>
          </html>

          • 2. Re: Table with auto-expanding left and right column?
            Level 1
            Hey, this is great. Thanks. Only problem I'm having now is that the text seems justify left yet I can't find tags (css or html) that tell it to do otherwise. I'm previewing through IE6.

            Thanks,

            Greg
            • 3. Table with auto-expanding left and right column?
              Level 1
              Hey, this is great. Thanks. Only problem I'm having now is that the text seems justify left yet I can't find tags (css or html) that tell it to do otherwise. I'm previewing through IE6.

              Thanks,

              Greg
              • 4. Re: Table with auto-expanding left and right column?
                Level 7
                Justify left is the default. If you don't want that, then you must
                explicitly change it.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.dreamweavermx-templates.com - Template Triage!
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                ==================


                "bicycleyguy" <webforumsuser@macromedia.com> wrote in message
                news:e4ctii$2vt$1@forums.macromedia.com...
                > Hey, this is great. Thanks. Only problem I'm having now is that the text
                > seems justify left yet I can't find tags (css or html) that tell it to do
                > otherwise. I'm previewing through IE6.
                >
                > Thanks,
                >
                > Greg
                >


                • 5. Re: Table with auto-expanding left and right column?
                  Level 1
                  My bad. Wrong use of the term "Justify". The problem I'm having is whether the text is aligned center, left or right, there's a sizable space to the right ofd the text block when the the page is expanded to the width of my screen (whether in DW or IE)
                  I can't figure out why. I want the text to be centered in the cell regardless of the width of the browser. Any thoughts?

                  Thanks. Greg