Forum Moderators: not2easy

Message Too Old, No Replies

Fixed Width & 100% Height?

Is it possible?

         

WVUDesigner

9:33 pm on Nov 10, 2004 (gmt 0)

10+ Year Member



Want to have a 3 column layout with header and footer, width needs to be fixed but height needs to either be 100% or to stretch with the content. When using either 100% for heights of container, left nav, content and right nav with no success. Please help!

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;
}

SuzyUK

8:33 pm on Nov 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



* bump *

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