homepage Welcome to WebmasterWorld Guest from 54.161.191.154
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Div stretching more than necessary
dinans52



 
Msg#: 4323656 posted 9:08 pm on Jun 8, 2011 (gmt 0)

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;

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4323656 posted 11:30 am on Jun 13, 2011 (gmt 0)

Hi dinans52 [webmasterworld.com] - and welcome to WebmasterWorld,

#filler2 takes it's 100% height from it's parent element, so there needs to be a height set on body.

You haven't said what versions you are supporting, but post #4 in the forum ibrary deals with height issues across of a range of browser versions.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved