(Another) Sticky Footer Question

I know this has been covered and I’ve combed through the forum for solutions and spent a lot of time trying to get the code right. I’ve gotten the footer to stick to the bottom of my page but I can’t seem to get rid of the space above it (the center space) without it losing the footer “stickiness.” As it is now, when the page is opened the footer is below the web page (even though it functions as it should) and a scroll bar always shows up on the right. The link to the page is here (it’s only gallery 1 that I’m trying to set up as a template for the rest) Any help is greatly appreciated:

My (relevant) CSS is this:

html, body {
    height: 100%;

body {
    margin: 0px;
    padding: 0px;
  body {
    text-align: center;
    padding-top: 60px;
    border-top-color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;

div#wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px 0px -41px 0px;

div#footer_wrapper {
    width: 100%;
    height: 41px;

div#content_wrapper {
    width: 100%;
    padding: 0px 0px 41px 0px;


Required in certain cases


div#footer_wrapper, div#content_wrapper {
    min-width: 942px;

div#footer_inner_wrapper, div#content_inner_wrapper {
}#footer_wrapper #footer_inner_wrapper div img {
    width: 100%;

  #apDiv4 {
      left: 47px;
      top: 38px;
      color: #CCC;


Unfortunately (and don’t take this the wrong way) that page is pretty broken with no doctype and incorrectly formatted html and is unlikely to display properly I’m afraid.
Also the sticky footer routine you are using is not going to work anywhere reliably either.

You must have a valid doctype these days or all bets are off.

Here is the wireframe to get you started with your sticky footer image in position.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
html,body {
h1,,h2,h3,h4,h5,h6,p{margin:0 0 1em}
ol,ul{margin:0 0 0 1.5em;padding:0}
html, body {
    height:100%;/* needed to base 100% height on something known*/
#outer {
    margin-top:-218px;/*footer height - this drags the outer p through the top of the monitor */
* html #outer {height:100%}
#header {
    border-top:218px solid #000; /* soak up negative margin and allows header to start at top of page*/
#footer {/* footer now sits at bottom of window*/
    height:218px;/* must match negative margin of #outer */
    background:url(http://www.sharonland.com/galleries/gallery1/Footer.jpg) no-repeat 0 100%;
/*Opera Fix*/
body:before {
    margin-top:-32767px;/* - negate effect of float*/
h1, h2, p {
    padding:0 10px;
#outer:after {/* instead of using display table for ie8*/
    content:" ";
<div id="outer">
    <div id="header">
    <div id="main">
<div id="footer">
    <p> buttons go here</p>

You cannot add padding or margins to the body or to the page wrapper when using a sticky footer method because that kills the effect. Make room on inner elements.

All you need to do now is place your content properly inside the container called #main.

Read the CSS faq on the sticky footer for how this works and more details.

Thank you, I fully understand it needs to be properly formatted with a doctype etc… before the site can function. The person working on this with me (the person who can properly code) is MIA. So it’s frustrating as a designer. It’s just up on my own url to try to get the design working. I thank you for the wireframe. I’ll start from scratch using that. I really do appreciate your help.

Paul, Just wanted to quickly write and say thank you so much. Your example is working perfectly! :]

Glad it helped.:slight_smile:

Just shout if you get stuck again and we’ll try to help.

Paul I’m wondering if you might give me your opinion or help again. I’ve tried many ways to make this page work (especially for different size resolutions/browser sizes). I’ve uploaded one here:

This is with the gallery set to height of 75% … if I set the gallery to a specific height the sticky footer works better (it shows up more at the bottom and goes up and down better with the resizing of the browser) but then I’m limited to a smaller swf slide show. Is there a way to resize the swf vertically with less space below it and the footer sticking to the bottom or is this just not dooable. I’m just hoping you can give me your opinion on the best way to do this.

Thanks again, Sharon


I would just go with a fixed width and height element rather than trying to scale to the viewport as that will look bad and will be awkward to manage.

You don’t need all that MM stuff for the rollovers at the bottom as that can be done in a few lines of css.

You mangled the footer again :slight_smile: The dimensions must all match otherwise you won’t get to sit properly. The footer image would be better as a background image as in my original example.

Here’s an example again with an odd flash demo centred.


Just view source to see that the code is about half the size of the code that you were using. There is no JS in the page at all.

I know I mangled the footer (again) :] I’m sorry, I was literally up all night trying to figure this out (I know it’s sad). THANK YOU… that code will not only help but will help answer my questions concerning the swf placement, footer background (for some reason I couldn’t get it to work the same as you had it) and I am worse at js than html (lol) so there’s that. I’m trying to learn, thanks so much. I’ll stop bugging you :]

Hi Paul, Is there a way to make the footer image stretch to 100% horizontally with CSS (ie: using it as the background image in the div) ? My front page has a footer image that can’t really be repeated. And I don’t want to mangle it again. :wink:

Well you can do what you originally did and scale a foreground image but the results depend on the image as to whether it looks good or not. If you want content to sit on top of the image then you wil need to place it absolutely from within ts container.

That means setting position:relative on the parent element and then the foreground image can be positioned absolutely within that element which will allow footer content to sit on top if needed. Then you would need an inner footer element again with position:relative applied and also a z-index of 2 or higher so that content sits on top of the footer.

I would still prefer to use a background image but slice it more carefully.

If you look at the image I used in the example above:

I took your image and made a copy and then doubled the size of the canvas and flipped the horizontal alignment. That gave me a seamless join so that the image can be repeated forever. I then optimised the image and even though it was double the width of your original image it was still a smaller file size.

I’ve done the same here with your home page image:


Because that image is so tall you will want content to overlap it so it complicates the sticky footer routine even more. It all depends what you want to achieve and whether content needs to overlap the image or not.

Yes! I’ll do it that way instead. I don’t think I really understood about doubling the image length and flipping the horizontal alignment (and I know I needed to optimize it too :]). It looks and functions great that way. I think this is the first time I am truly understanding the CSS involved. I also checked out your webpage and it’s a great reference. Thank You (again).

I’ve tried to resist asking you, and you can just direct me to a resource to read if you like, but I can not space the buttons (triangles) horizontally. I’ve tried everything and it’s now 4am :frowning: Any chance you can point me in the right direction?

closest I’ve gotten is experimenting with   in the html,
padding:5px 10px 5px 15px; in the CSS and I tried creating classes for the individual buttons but nothing really worked.

Here’s the link:

I also did the index page but I’m wondering if I should make the sticky window stop at some point as to not go beyond (or up over) the swf.


I tried to delete the last post because I realized I can just look at the source code of your previous example you put up. For some reason there isn’t an edit button, or maybe I’m too tired. Anyway, you can disregard the last post.

No worries :slight_smile: (There is a time limit on edit buttons to stop people coming back later and entering spam into all their posts.)

How’s it going:) I take it from the deleted posts that you are asking questions and the solving it yourself later :slight_smile: Which is a good thing.

Yes Paul, I’ve solved all the problems and I’m rebuilding all the pages. I used these lines of code for adjusting the buttons:

#footer ul li gives margins to all buttons

#footer ul li.home a = Just controls the margin of the HOME button
add margin-left value

#footer ul li.home a // margin-left 10px
= moves just grey HOME button over to the right

#footer ul li.home a // margin-right 10px
= moves just other than home buttons over to right

#footer ul li.home // margin-left 50px
= moves all over to the right

#footer ul li a span // text align, width …
= controls tooltip font formatting

#footer ul // bottom 50px
= moves whole line of buttons up

#footer ul li.home a (and)
#footer ul li.home // height 20px
=gave space at the bottom of home button to show (not cut off) bottom of button image

#footer ul li a:hover span // Top −35px
determines where the tool tip text goes