Div stretching more than necessary

I have a div called "filler2" after my footer which is meant to continue the background color of the footer if the content doesn't take up all of the window. I have height set at 100%. It works, but the problem is that is stretching more than the window height. To add to the confusion, different browsers/monitors respond differently. The site works as intended on Firefox, but Chrome does the odd stretching thing. Also, nothing happens on IE. Any ideas?

The URL for the site is [imamminhajuddin.org ]

Basic layout:


<body> 
<div id="wrapper"> 
<div id="menu"></div> 
  <div id="subwrapper"> 
<div id="content"></div>
<div id="sidebar"></div>
  </div><!-- #subwrapper -->  
   <div id="footer"> 
<div id="footer_left"></div> 
    <div id="footer_middle"></div> 
    <div id="footer_right"></div>
  </div> <!-- #footer --> 
</div><!-- #wrapper --> 
<div id="filler2"></div> <!-- function of this div is to fill remaining space with footer color --> 
</body>

CSS:

/* 

Theme Name: Minhaj

Theme URI: http://www.adnanhussaini.com

Description: Minhaj website theme

Version: 1.0

Author: Adnan Hussaini

Author URI: http://www.adnanhussaini.com



*/

* {
margin: 0px;
padding: 0px;
border: 0px;
}
A:link {text-decoration: underline; color:#666666;}
A:visited {text-decoration: underline; color:#666666;}
A:active {text-decoration: underline; color:#666666;}
A:hover {text-decoration: underline; color:#FFF;}

ul li {
list-style-position: inside;
}
html {
background: #b3b3b3 url(theme/header_gradient.png) repeat-x;
height: 100%;
}
body {
padding: 0;
margin: 0;
background: url(theme/header.png) no-repeat center top;
color: #000;
width: 100%;
display: table;
}
#wrapper {
width: auto;
height:auto;
margin: 0;
border: 0;
padding: 0px;
background: url(graphics/wrappertest.png);
background-position:bottom;
background-repeat:repeat-x;
}
#filler{
background: #261e1b;
height: 100%;
padding-bottom: 150px;
}
#filler2{
background:#261e1b;
height: 100%;
}

#menu {
width:851px;
height:auto;
background:none;
border: 0;
margin: auto;
padding: 1px 20px 15px 20px;
clear:both;

font-family: Georgia, serif;
font-size: .75em;
font-weight:500;
list-style-type: none;
}
#subwrapper {
width:891px;
height:auto;
background: transparent url(theme/content.png) repeat; 
border: 0;
margin: 0px auto;
padding: 0px;
list-style:none
}
#content {
width:650px;
border: 0;
margin: 0px;
padding: 0 15px 0 15px;
float:left;
list-style:circle !important;
list-style-type:circle !important;
}
#holder {
width:623px;
height:283px;
border: 0;
margin: 0;
padding: 13px 0px 0px 13px;
background: url(theme/holder.png);
}
#sidebar{
width:196px;
border: 0;
margin: 0px;
padding: 0 15px 0 0;
float:right;

font-family: Georgia, serif;

}
#form
{
list-style:none;
}
#footer {
clear:both;
width:891px;
height:131px;
background-image:url(theme/footer.png);
background-repeat:no-repeat;
background-position:center top;
border: 0px;
margin: auto;
padding: 40px 0 0 0;

font-family: Georgia, serif;
text-align:center;
color:#333;
font-size:.7em;
}

#footer_left{
width:400px;
height:80px;
padding-left: 10px;
float:left;
color: #CCCCCC;
text-align:left;
}
#footer_middle{
width:220px;
height:80px;
padding-left: 10px;
float:left;
color: #CCCCCC;
text-align:left;
}
#footer_right{
width:230px;
height:80px;
padding-right: 5px;
padding-left: 15px;
color: #CCCCCC;
float:right;
text-align:left;
}
.clear
{
 clear:both; 
}
h1 {
margin: 0;
padding: 0;
color: #093;
}


.post{
padding-bottom:10px;
font-family: Georgia, serif;
}
.bodypost{ 
font-family: Georgia, serif;
color: #00000;
font-size:.75em;
line-height: 20px;
}
.commentpost{ 
background-color: #CCC;
padding: 5px;
color: #00000;
font-size:.75em;
line-height: 20px;
}
.adminmessage{
color:#F00;
}
.bodypost ul{
margin-left: 0; 
padding-left: 15px
}
.bodypost p{
margin: 0;
padding-top: .20em;
padding-bottom: .20em;
}
.postmetadata{
color:#333;
font-size:.7em;
}

/* comments */
.comments-template{

margin: 10px 0 0;

border-top: 1px solid #ccc;

padding: 10px 0 0;

}



.comments-template ol{

margin: 0;

padding: 0 0 15px;

list-style: none;

}



.comments-template ol li{

margin: 10px 0 0;

line-height: 18px;

padding: 0 0 10px;

border-bottom: 1px solid #ccc;

}



.comments-template h2, .comments-template h3{

font-family: Georgia, Sans-serif;

font-size: 16px;

}



.commentmetadata{

font-size: 12px;

}



.comments-template p.nocomments{

padding: 0;

}



.comments-template textarea{

font-family: Arial, Helvetica, Georgia, Sans-serif;

font-size: 12px;

}

/* form elements */
#formspacer {
padding-top:3px;
width:100%;
}
.input {
  border: 1px solid #CCCCCC;
  background: #ffc;
font-family: Georgia, serif;
}
.button-primary {
  border: 1px solid #CCCCCC;
  background: #333;
color: #CCCCCC;
font-family: Georgia, serif;
float: right;

Div stretching more than necessary

dinans52

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week