tags:

views:

294

answers:

6
+2  Q: 

sticky footer question

Hello everybody, I've browsed to all question related to "sticky footer" and nothing helped me because my #content div is doesnt not always have sufficient content to push footer to the bottom, here is the code I've used to achiveve this but apparently I did something wrong:

CSS:

    /* FOOTER FIX */
    html, body, div#container { height: 100%; }
    body > div#container { height: auto; min-height: 100%; }
    div#index_body { padding-bottom: 30px; }

   .footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 30px; 
    margin-top: -45px; 
    padding-top:15px;
}

.footer { 
    color: #666;
    background-color:#F4F7FA;
    border-top:1px solid #E6E7E8; 
    font-size:95%;
    text-align: center;  
}    /* END FIX */

Here is some HTML so you know how it all looks ,

HTML:

   <html>
    <body>
    <div id="container">
    <div id="index_body">
    </div><!--end index_body -->
    <div id="index_footer" class="footer">
    </div><!--end footer -->
    </div><!--end container -->
    </body>
    </html>

I've really tried million combinations with many sticky footers and none of them work, some of them work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just css, because the index_footer height is not fixed? Is there a way to do this with javascript or what is the right way to do this ? cheers

EDIT : My screen resolution is really big maybe that is the problem its 1680 x 1050

+1  A: 

I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).

JasCav  2009-12-30 15:54:10
Oh I've try this for so many times, like zilion combinations .. problem is because somethimes I don't have enough content in my container so the footer doesn't stick, sometimes I have too much content and then footer sticks over the content instead at the bottom and sometimes I just have enough to stick it properly, maybe in my case I need to use javascript
Gandalf StormCrow  2009-12-30 16:00:30
+2  A: 

Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.

A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),

<html>
<head>
    <title>Sticky Footer Test</title>

    <style>
        html, body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        * { 
            margin: 0px;
        }

        #container {
            min-height: 100%;
            height: auto !important;
            height/**/: 100%; /* for IE6 */
            background: #ddd;
        }

        #footer {
            position: relative;
            background: #555;
            margin-top: -100px;
            height: 100px;
        }

        #content {
            padding-bottom: 100px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <p>Hello! I'm some content!</p>
        </div>
    </div>
    <div id="footer">
        <p>Hello! I'm a footer!</p>
    </div>
</body>
</html>

If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc

For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),

<html>
<head>
    <title>Sticky Footer Test 2</title>

    <style>
        html, body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        * { 
            margin: 0px;
        }

        #container {
            position: relative;
            min-height: 100%;
            height: auto !important;
            height/**/: 100%; /* for IE6 */
            background: #ddd;
        }

        #footer {
            position: absolute;
            bottom: 0px;
            width: 100%;
            background: #555;
            margin-top: -100px;
            height: 100px;
        }

        #content {
            padding-bottom: 100px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <p>Hello! I'm some content!</p>
        </div>
        <div id="footer">
            <p>Hello! I'm a footer!</p>
        </div>
    </div>
</body>
</html>
Rich Adams  2009-12-30 16:20:05
That's probably what I would try.
Shea Daniels  2009-12-30 16:21:22
Thank you for your examples, but there is one slight thing which isn't good, when you resize the window the footer overlaps the content.
Gandalf StormCrow  2009-12-30 16:50:21
@Gandalf: Ah yes, I see what you mean. You should just be able to wrap the content in another div and give it a bottom-padding of 100px;. I will update the answer accordingly.
Rich Adams  2009-12-30 17:12:24
Answer now updated so that both examples won't overlap content. Since you say you can't move the footer outside the container, then the second example would be the one you want to go for.
Rich Adams  2009-12-30 17:52:00
+1  A: 

I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...

The corrected CSS:

/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }

body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 30px; 
    padding-top:15px;
    color: #666;
    background-color:#F4F7FA;
    border-top:1px solid #E6E7E8; 
    font-size:95%;
    text-align: center;  
}    /* END FIX */

The corrected HTML:

<html>
<body>
    <div id="container">
        <div id="index_body">
        </div><!--end index_body -->
    </div><!--end container -->
    <div id="index_footer" class="footer">
    </div><!--end footer -->
</body>
</html>
jennyfofenny  2009-12-30 16:23:32
A: 

This will work, no matter what the height of the #container is:

CSS:

    html, body {
        height: 100%;
    }

    #container {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin-bottom: -50px;
        position: relative;
    }

    #index_footer {
        height: 50px;
        line-height: 50px;
        position: relative;
        background: #CCC;
    }

    #push {
        height: 50px;
    }

HTML:

<div id="container">
    <div id="index_body">
        test
    </div>
    <div id="push"> </div>
</div>
<div id="index_footer" class="footer">
    test
</div>
Harmen  2009-12-30 16:23:40
My html is not like that I cannot use that .. my footer is inside container..
Gandalf StormCrow  2009-12-30 16:30:11
A: 

Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish

CSS

html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }

div#index_body { 
  min-height: 100%;
  margin-bottom: -46px;
}

.footer, .push {
  height: 30px;
}

.footer { 
  clear: both; 
  position: relative; 
  z-index: 10; 
  margin: 0px;
}

.footer { 
  color: #666;
  background-color:#F4F7FA;
  border-top:1px solid #E6E7E8; 
  font-size:95%;
  text-align: center;  

   }    /* END FIX */

html

<body>
<div id="container">
<div id="index_body">
        <div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>
Didius  2009-12-30 16:37:01
This doensn't work at all m8
Gandalf StormCrow  2009-12-30 17:33:25
+1  A: 

It's actually easy, here's the minimum required template:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1980857</title>
        <style>
            html, body {
                margin: 0;
                height: 100%;
            }
            #container {
                position: relative;
                min-height: 100%;
            }
            * html #container {
                height: 100%; /* This is min-height for IE6. */
            }
            #footer {
                position: absolute;
                bottom: 0;
            }
            #footer, #pushfooter {
                height: 50px; /* Both must have the same height. */
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="content">Content</div>
            <div id="pushfooter"></div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.

BalusC  2009-12-30 16:49:12
ok it does indeed push it to the bottom of the website but there is some blank space left below, how do I get rid of that ?
Gandalf StormCrow  2009-12-30 17:32:47
I mean the unecessary scroller appers if you know what I mean .. I don't need to have scroller at all but it appers because of the empty blank space below footer
Gandalf StormCrow  2009-12-30 17:34:55
The scroller is caused by using elements with top and bottom margins instead of paddings inside the `#container`. Margins aren't taken into the height, they goes beyond the height. You should use padding instead. Also, ensure that you set the following in CSS to remove default margins: `p, div { margin: 0;}`. Once again, copypaste the above example and run it. You'll see no scroller. Just build further based on this template.
BalusC  2009-12-30 17:40:15
hmm its not working again the same thing, you see I don't build the website from the beginning I'm just doing some final touches, thank you anyways you get a vote up, I'll try again tommorrow , feeling preaty tired now. tnx again
Gandalf StormCrow  2009-12-30 17:48:02
There may be more elements which play a role. Just verify the entire CSS that you didn't specify any top/bottom margins, for example headers, lists, etc. inside the `#container`. Otherwise you need to increment the `#pushfooter`'s height accordingly.
BalusC  2009-12-30 17:51:48

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?