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

Question

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

Answer 1

I would re-think the way you're creating your columns. Use the inner content to push the main div down. See this example.

Answer 2

Are you using Firebug in your Firefox browser? Using Firebug I can see that your column structure is all screwed up. You should consider rebuilding them more simply.

Regard the color getting chopped of, it has to do with you setting:

html, body { height: 100% }

In this case 100% only covers the visible screen height, not 100% of your content.