CSS layout problem on Firefox with filling space between end of left column and footer

Posted by Jean on Stack Overflow See other posts from Stack Overflow or by Jean
Published on 2010-05-26T17:06:43Z Indexed on 2010/05/26 17:11 UTC
Read the original article Hit count: 390

Filed under:
|
|
|
|

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

© Stack Overflow or respective owner

Related posts about html

Related posts about css