[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