CSS layout problem on Firefox with filling space between end of left column and footer
- by Jean
Basically, the left column is supposed to extend to the footer with the continuous red color. However, in Firefox on pages with lots of text, the column does not extend to the footer and leaves a large white gap--see site: http://library.luhs.org/JHSII/about.html
I've tried readjusting the heights, creating the sticky footer, and other things I've read about on this site. So I admit that I'm stumped, and what's really odd is that the layout seems to work in IE as there is no white space! I didn't create the site, but I recently inherited it and trying to work through the mess
Any help is much appreciated, here's the CSS
#html,body{
margin:0;
padding:0;
border:0;
height:100%;
}
#body{
background:#ffffff;
min-width:965px;
text-align:center;
width: 600px;
font: Geneva, Arial, Helvetica, sans-serif;
}
#.style7{
clear:both;
height:1px;
overflow:hidden;
line-height:1%;
font-size:0px;
margin-bottom:-1px;
}
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:965px;
height:100%;
}
#wrapper{
min-height:100%;
height:100%;
background:#660000;
background-color: #660000;
background-repeat: repeat;
}
#wrapp\65 r{
height:auto;
}
# html wrapper{
height:100%;
}
#outer{
z-index:1;
position:relative;
margin-left:150px;
width:815px;
background:#FFFFFF;
height:100%;
background-color: #FFFFFF;
}
#left{
width:151px;
float:left;
display:inline;
position:relative;
margin-left:-150px;
}
padding: 20px;
border: 0;
margin: 0 0 0 240px
*>html #left{width:150px;}
#container-left{
width:150px;
color: #CCCCCC;
}
* html #left{margin-right:-3px;}
#center{
width:800px;
float:right;
display:inline;
margin-left:-1px;
}
#clearheadercenter{
height:125px;
overflow:hidden;
}
#clearfootercenter{
height:50px;
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
clear: both;
width:965px;
height:50px;
overflow:hidden;
margin-top:-50px;
background-color: #660000;
}
#subfooter1{
background:#FFFFCC;
text-align:left;
margin-left:150px;
height:50px;
}
#header{
z-index:1;
position:absolute;
top:0px;
width:815px;
margin-left:150px;
height:100px;
overflow:hidden;
background-color: #660000;
}
#subheader1{
background:#FFFFCC;
text-align:center;
height:70px;
}
#gfx_bg_middle{
top:0px;
position:absolute;
height:100%;
overflow:hidden;
width:815px;
margin-left:150px;
background:#FFFFFF;
}
# html #gfx_bg_middle{
display:none;
}
#floatingnav {
margin: 5px 10px 5px 5px;
padding: 0px 5px 5px;
float: right;
font: .75em/1.35em Geneva, Arial, Helvetica, sans-serif;
height: 600px;
width: 300px;
}
#floatingnav a {
color: #630;
}
#floatingnav ul {
margin-top: -5;
}
#.floatright
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}
#outer{
word-wrap:break-word;
}
#table.s1 {
border-width: medium;
border-spacing: 2px;
border-style: none;
border-color: rgb(85, 0, 0);
border-collapse: collapse;
background-color: white;
}
#table.s1 th {
border-width: medium;
padding: 2px;
border-style: groove;
border-color: red;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
}
#table.s1 td {
border-width: medium;
padding: 2px;
border-style: groove;
border-color: #660000;
background-color: #FFFFFF;
-moz-border-radius: 0px 0px 0px 0px;
}
#a:link {
color: #000066;
}
#a:visited {
color: #000066;
}
#p.sample {
font-family: serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: left;
text-indent: 0ex;
}
