[thelist] 3 row + 3 column page using CSS

[Adriano Castro]

    Hi,

    What do you believe to be the best way, using CSS, of creating a page
with 3 rows (header, middle, footer) and, on the "middle" row have 3
columns spanning to the full max height of the tallest one (left,
center, rite).

    I've tried it before and even used wired.com's structure as
inspiration but somewhere in the process it didn't work out. I managed
to have all the rows and columns displaying correctly but there's a
small glitch: the footer position will only respect one of the
columns, i.e., if the 3rd column (rite) grows in content the footer
will move down with it but if the same happens for the 1st or 2nd
columns (left and center) it won't move thus being overlapped by them.

    The XHTML structure:

    BODY
      #MAIN
        #TOP
         a bunch of classed divs
        #MIDDLE
          #SUBCONTAINER
            #LEFT
              a bunch of classed divs
            #CENTER
              a bunch of classed divs
          #RITE
      #FOOTER
    /BODY

    The CSS:

#main {
  margin: 0;
  padding: 0;
  background: #F4F4F4;
  width:expression(document.body.clientWidth > 1000? "1000px": "900px" );
}

#top {
  position:relative;
  clear:both;
  top: 0;
  margin: 0;
  padding: 0;
  width: 900px;
}

#subcontainer {
  position:relative;
  width:900px;
  left:0;
  top: 0;
}

#left {
  position:absolute;
  top:0px;
  left:0px;
  width:190px;
  margin: 0;
  padding: 0;
  clear: left;
}

#center {
  width:500px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0px 200px 200px;
}

#rite {
  clear: right;
  margin: 0;
  padding: 0;
  position:relative;
  top:0px;
  left:710px;
  width:190px;
}

#footer {
  border-top: 5px solid #FC7713;
  clear:both;
  color: #305F81;
  font-family: verdana, tahoma, "trebuchet ms", sans-serif;
  font-size: 75%;
  margin: 0 0 5px 0;
  padding: 2px 2px 0 2px;
}

    All suggestions, comments and corrections are more than welcome.

    Tks,
    AD