[thelist] Re: 3 row + 3 column page using CSS

Adriano Castro ad at netvisao.pt
Tue Apr 6 04:53:56 CDT 2004


I forgot this bit:

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


>     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:   5px 0;
>   padding: 2px 2px  2px;
> }


More information about the thelist mailing list