How do I make div heights relative like a table row & cell

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Shash
    #1

    How do I make div heights relative like a table row & cell

    Hey People,

    I'm facing a issue with browser compatablity here, I want a certain
    group of divs to behave like a table row, i.e if one of the cell/div
    has content longer than the other divs, all the other divs should
    reflect the same height. I managed to get success in doing this with
    mozilla (i love it!) and Opera 7, but IE seems to be ignoring the
    defined function (again!) of the properties display: table, table-row,
    table-cell...

    Can you help? The only restriction I have is I want to avoid the use o
    f Javascript for this.

    Here is the page code for your reference...

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

    <html>
    <head>
    <title></title>
    <style>
    body {
    margin: 0px;
    }

    div.outTable {
    width: 100%;
    display: table;
    }
    div.rowTable {
    display: table-row;
    }
    div.cellTable {
    display: table-cell;
    width: 25%;
    background-color: Aqua;
    }
    div.cellTableTw o {
    display: table-cell;
    width: 25%;
    background-color:Blue;
    }

    /*IE Only code */
    * html div.outTable {
    width: 100%;
    display: block;
    height: 100%;
    border: 1px #f00 dotted;
    }
    * html div.rowTable {
    display: inline;
    height: 100%;
    }
    * html div.cellTable {
    display: inline;
    width: 25%;
    background-color: Yellow;
    float: left;
    height: auto;
    }
    * html div.cellTableTw o {
    display: inline;
    width: 25%;
    background-color:Orange;
    float: left;
    height: auto;
    }
    </style>
    </head>

    <body>

    <div class="outTable ">
    <div class="rowTable ">
    <div class="cellTabl e">Hello Testing</div>
    <div class="cellTabl eTwo">Hello World!</div>
    <div class="cellTabl e">Hello World! This is the text to test if all
    the divs reflect the same height as this div, IE fails the text but
    mozilla pass it. How do get all versions of IE 5.x, IE 6.0.x to work
    with this.</div>
    <div class="cellTabl eTwo">Hello Testing </div>
    </div>
    </div>

    </body>
    </html>
    ------------------------------------------------


    Cheers!

    Shashwat Nagpal
    Just a moment...
    http://www.shashwat.com


    Tags: None
    • Arctic Fidelity
      #2
      Re: How do I make div heights relative like a table row &amp; cell

      "Shash" <snagpal@gmail. com> wrote in
      news:1114434943 .476278.197130@ z14g2000cwz.goo glegroups.com:
      [color=blue]
      > Hey People,
      >
      > I'm facing a issue with browser compatablity here, I want a certain
      > group of divs to behave like a table row, i.e if one of the cell/div
      > has content longer than the other divs, all the other divs should
      > reflect the same height. I managed to get success in doing this with
      > mozilla (i love it!) and Opera 7, but IE seems to be ignoring the
      > defined function (again!) of the properties display: table, table-row,
      > table-cell...[/color]

      If you're looking for something that behaves like a table, why not use
      a table? There is certainly nothing wrong with using tables the way
      they were designed to be used. Seems like the most reliable approach.

      --
      Arctic Fidelity <spam@sacrificu mdeo.net>
      <http://www.sacrificumd eo.net>
      "Beware of bugs in the above code; I have only proved it correct, not
      tried it." -- Donald Knuth

        Comment

        • Shash
          #3
          Re: How do I make div heights relative like a table row &amp; cell

          I can not use a table here b'coz the data that's gonna be in these
          blocks is not a tabular data and W3C & WAI guidelines clearly state
          that use tables only for tabular data not for layouts...

          And in this case if I use tables it will change the meaning of the
          content assuming some one uses a screen reader to get the contents of
          the page...

            Comment

            • Peter Maas
              #4
              Re: How do I make div heights relative like a table row &amp; cell

              Shash schrieb:[color=blue]
              > I can not use a table here b'coz the data that's gonna be in these
              > blocks is not a tabular data and W3C & WAI guidelines clearly state
              > that use tables only for tabular data not for layouts...[/color]

              What is the difference between <div class="outTable "> using
              display: table and <table> apart from the names? Your divs will
              have the same nesting structure as table, tr and td, won't they?

              I think W3C didn't ban your <div class="outTable "> because they
              cannot guess all the class names web developers come up with to
              circumvent the <table> ban :)

              --
              -------------------------------------------------------------------
              Peter Maas, M+R Infosysteme, D-52070 Aachen, Tel +49-241-93878-0
              E-mail 'cGV0ZXIubWFhc0 BtcGx1c3IuZGU=\ n'.decode('base 64')
              -------------------------------------------------------------------

                Comment

                • Johannes Koch
                  #5
                  Re: How do I make div heights relative like a table row &amp; cell

                  Peter Maas wrote:
                  [color=blue]
                  > What is the difference between <div class="outTable "> using
                  > display: table and <table> apart from the names?[/color]

                  The first is for elements that _look like_ a table (grid), The second is
                  for elements that _are_ and _should be perceived_ as a table. E.g. some
                  assistive technologies have a table mode with associating headers to
                  data cells etc. This is not necessary for something that only looks like
                  a grid.
                  [color=blue]
                  > Your divs will
                  > have the same nesting structure as table, tr and td, won't they?[/color]

                  Not necessarily. Some boxes may be generated automatically by the renderer.

                  --
                  Johannes Koch
                  In te domine speravi; non confundar in aeternum.
                  (Te Deum, 4th cent.)

                    Comment

                    Previous template Next
                    Working...