Forum Moderators: not2easy
I know the 100% DIV height deal, but on this one site, can't get it to work, something is in the way and I need an extra pair of eyes....problem is in IE AND FireFox believe it or not...
Here is the dev site:
<snip>
You can see the problem right off at the very bottom, the content on top is going past the white background, which is #contentarea on the stylesheet...Here are the appropriate CSS entries for this....
html {
height: 100%;
padding: 0;
}
body {
background-image: url(images/bg.png);
background-position: top;
background-repeat: repeat-x;
background-color: #ffffff;
margin: 0px auto;
text-align: center;
width: 100%;
font-family: arial;
font-size: 13px;
font-weight: normal;
color: #58595b;
height: 100%;
min-height: 100%;
padding: 0;
position: absolute;
top: 0px;
bottom: 0px;
}
#container {
width: 1017px;
margin: 0px auto;
text-align: left;
position: relative;
height: 100%;
min-height: 100%;
z-index: 0;
top: 0px;
bottom: 0px;
}
#logobar {
width: 993px;
height: 158px;
position: absolute;
margin: 0px auto;
text-align: left;
}
#searchbar {
width: 1017px;
height: 58px;
position: absolute;
top: <cfif CGI.HTTP_USER_AGENT CONTAINS "IE">184<cfelse>186</cfif>px;
z-index: 3;
text-align: center;
line-height: 60px;
}
#contentarea {
width: 993px;
margin: 0px auto;
background-color: #fff;
position: absolute;
top: 245px;
bottom: 0px;
z-index: 8;
height: 100%;
min-height: 100%;
text-align: left;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
padding-bottom: 0px;
}
#nav_tabs {
width: 1017px;
height: 42px;
margin: 0px auto;
position: absolute;
text-align: left;
top: <cfif CGI.HTTP_USER_AGENT CONTAINS "IE">156<cfelse>154</cfif>px;
z-index: 4;
padding-left: 12px;
}
#left_col {
width: 180px;
float: left;
height: 100%;
min-height: 100%;
}
#main_col {
width: 453px;
float: left;
height: 100%;
min-height: 100%;
}
#right_col {
width: 300px;
float: right;
height: 100%;
min-height: 100%;
}
#gutter {
width: 30px;
height: 100%;
float: left;
min-height: 100%;
}
And the HTML behind it (stripped all content out for clarity):
<div id="container"><div id="logobar">
</div>
<div id="nav_tabs">
<div id="colortab" class="ddcolortabs">
</div>
</div>
<div id="searchbar">
</div>
<div id="contentarea">
<div id="left_col">
</div>
<div id="gutter"> </div>
<div id="main_col">
</div>
<div id="gutter"> </div>
<div id="right_col">
</div>
</div>
</div>
Thanks in advance for any help you can give me, I'm goin' cross-eyed lookin' at the code trying to figure it out! lol
[edited by: swa66 at 10:09 pm (utc) on July 10, 2009]
[edit reason] No URLs, please see ToS and forum charter [/edit]