Forum Moderators: not2easy
body {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper {
width: 760px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
height: 100%;
}
#container {
width: 760px;
border: 1px solid #000000;
float: left;
height: 100%;
}
#header {
float: left;
height: 180px;
width: 760px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center top;
clear: both;
}
#leftnav {
background-color: #777777;
float: left;
width: 180px;
background-image: url(images/menu_bg.gif);
background-repeat: no-repeat;
background-position: left top;
height: 100%;
}
#content {
background-color: #CCCCCC;
float: left;
width: 420px;
background-image: url(images/content_bg.gif);
background-repeat: no-repeat;
background-position: left top;
height: 100%;
}
#rightnav {
background-color: #777777;
width: 160px;
float: left;
background-image: url(images/right_bg.gif);
background-repeat: no-repeat;
background-position: left top;
height: 100%;
}
#footer {
background-color: #000000;
height: 25px;
width: 760px;
float: left;
}
#coverimage {
background-image: url(images/coverimage.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
height: 179px;
width: 135px;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 3px;
background-color: #CCCCCC;
}
WVUdesigner..
this thread [webmasterworld.com] has some samples, each method has it's pros/cons depending on your requirements, support etc
Mac/IE seems to be the bugbear for most, it's not easy to get it to have both a "sticky" footer and 100 percent height or greater directive..
Like I said each method has it's pros and cons depending on
a: do you know the longest column or should all columns "control" the footer
b: what level of crossbrowser compatibility do you require (e.g. IE/Mac?)
c: Are You worried which Doctype you use: IE in Quirks can be manoeuvred, IE in Standards might require the use of expressions (to get percentage height - pixel heights)
Although it can be done it requires some form of workaround, either CSS hacks or extra HTML containers.. it's choices again ;)
Sorry not to be more help, perhaps if there's some criteria we can help find the best way for you
Thx
Suzy