Hey,

 

I'm currently in the (very slow!) process of redesigning my website, I had an issue with a sticky footer that was solved quickly here and I'm hoping someone can help me out again!

 

Here is a sample page of my site, and this is the relevant CSS code:

 

#content_wrapper {
margin: auto;
width: 1000px;
height: 550px;
}
#pedal_content_background {
background-position: center top;
background-image: url('../images/jellybeans.jpg');
background-repeat: no-repeat;
background-color: #FFFFFF;
padding-top: 20px;
padding-bottom: 20px;
}
#content_white_box {
background-image: url('../images/content_white_box.png');
background-repeat: no-repeat;
height: 550px;
padding: 10px;
}

 

As I mentioned before I'm using the Sticky Footer (which is very, very useful). My problem:

 

How to make the background image extend all the way to the bottom of the page, even if the white content box doesn't go down that far?

 

I've tried 'height=100%' and trying to set height to 'auto', nothing seems to work though? I'm just starting to learn and I've no doubt the answer is an obvious one, any help would be much appreciated!

 

Adam

add this to the css for the div you want to stretch further

 

overflow:auto;

Well, bearing in mind your wrapper goes all the way down because you're using the sticky footer (the wrapper is 100%, then the footer is below it right?), why not apply the background image to the wrapper instead of the pedal_content_background.

E.g:

#sticky_footer_wrap {background:url('../images/jellybeans.jpg') center top repeat-y #fff;}

I'm assuming you know what that means but in case you don't, it's a shorthand way of writing:

#sticky_footer_wrap {
background-image:url('../images/jellybeans.jpg');
background-position:center top;
background-repeat:repeat-y;
background-color:#fff;
}

add this to the css for the div you want to stretch further

 

overflow:auto;

 

This doesn't appear to work when I preview the page in Microsoft Expression? Oddly, the page looks fine until I turn off the 'activeX control bar'. Could my problems have something to do with the Sticky Footer that I'm using? Perhaps I'm not understanding the known issues? correctly?

 

Any help on this would be appreciated!

 

Adam

I agree just apply the bg to the sticky footer wrapper

Well, bearing in mind your wrapper goes all the way down because you're using the sticky footer (the wrapper is 100%, then the footer is below it right?), why not apply the background image to the wrapper instead of the pedal_content_background.

E.g:

#sticky_footer_wrap {background:url('../images/jellybeans.jpg') center top repeat-y #fff;}

I'm assuming you know what that means but in case you don't, it's a shorthand way of writing:

#sticky_footer_wrap {
background-image:url('../images/jellybeans.jpg');
background-position:center top;
background-repeat:repeat-y;
background-color:#fff;
}

 

Hey, Firstly apologies for overlooking your post, you must have been typing yours as I was typing mine!

 

Ok, so my css code now looks like this:

 

body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}

#sticky_footer_wrap {min-height: 100%;
background-image:url('../images/jellybeans.jpg');
background-position:center top;
background-repeat:repeat-y;
background-color:#fff;
}

#main_content {overflow:auto;
padding-bottom: 43px;}  /* must be same height as the footer */

#footer {
position: relative;
margin-top: -43px; /* negative value of footer height */;
height: 40px;
clear: both;
background-color: #000000;
border-top-style: solid;
border-top-width: 3px;
border-top-color: #FF9900;
}

#content_wrapper {
width: 1000px;
height: 550px;
padding-top: 10px;
padding-bottom: 10px;
}
}
#content_white_box {
background-image: url('../images/content_white_box.png');
background-repeat: no-repeat;
height: 550px;
padding: 10px;

 

The page now looks like this, the trick seems to have partly worked in that the background now goes all the way down, but now the sticky footer is no longer 'sticky' and my content box has disappeared? The latter is probably something I've done, not sure what to do to fix the footer though? Again, thanks for your assistance on this, any help would be appreciated!

 

Adam.

When I tried yesterday it worked perfect. Looks like you've made other changes to the page including removing the white background image.

Try this:

* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body:before {
content:"";
float:left;
height:100%;
margin-top:-32767px;
width:0;
}
#sticky_footer_wrap {
background-color:#FFFFFF;
background-image:url("../images/jellybeans.jpg");
background-position:center top;
background-repeat:repeat-y;
min-height:100%;
}
#main_content {
padding-bottom:43px;
margin:auto;
width:960px;
}
#footer {
background-color:#000000;
border-top:3px solid #FF9900;
clear:both;
height:40px;
margin-top:-43px;
position:relative;
}
#top_links {
float:right;
margin:10px;
}
#bottom_links {
float:right;
margin:10px;
}
#header {
background-color:#000000;
border-bottom:3px solid #FF9900;
border-color:#FF9900;
border-width:0 0 3px;
height:61px;
margin:0;
}
#content_wrapper {
padding-bottom:10px;
padding-top:10px;
width:1000px;
}
.superking_logo {
background-color:#000000;
float:left;
}

 

Just add the white background to the white box again.

When I tried yesterday it worked perfect. Looks like you've made other changes to the page including removing the white background image.

 

Just add the white background to the white box again.

 

Hey, thanks a lot for your help, do you mean the #content_white_box 'white background'? (you haven't included it on your code list is all). It wasn't displaying first thing this morning when I tested it but I've just checked it on IE6 and it seems to be there (minus any transparency though). I'll get into it again tonight and see if I can solve this.

 

Thanks very much again for your help!

 

Adam.

Yeah, the white box that was in the original CSS you posted earlier - you could add that in again for the white background, there's never only one solution . I just posted a modified version of your current CSS that repeats the background, and makes the footer sticky.