Sticky Footer Issues

Question

I am trying to create a sticky footer from a simple looking tutorial I found online. This seems to work ok until I try putting a width on my content div and I have no idea why.

If I add a width to the content div it seems the footer no longer has any distance between itself and the content div and so it obscures the content if there is a lot of content.

I have created this jsfiddle but it doesnt look as obvious there as it does if viewed in say firefix or IE.

Does anybody know why this is happening and what can I do to have a content div with a fixed width and auto margins to centre it but still have a footer that sticks to the bottom all the time if there is hardly any content or a large amount of content.

Below is my css for the content div:

#content {
                margin-top: 15px;                   
                padding-bottom:100px; /* Height of the footer element */
                border-left: 1px solid #C9C9C9;
                border-right: 1px solid #C9C9C9;
                border-bottom: 2px solid #C9C9C9;                    
                box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;                    
                width: 1024px; /* Here adding a width causes the footer to overlap */
                margin-left:auto;
                margin-right:auto;
                background-color: white;
                text-align: center;
                border: 1px solid red;
            }

http://jsfiddle.net/32M9Q/1/

Answer 1

Setting the background color of my web page to match the footer and the body isnt an option, I appreciate all the answers I have been given so far but unfortunately none of them were suitable for me.

I have had to do what I consider to be a hack which is add a div below the content which is higher than the footer, this means the footer sits on top of this div and not my content giving the illusion of space between the content and the footer:

<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>

Answer 2

At least in Chrome, the JSFiddle shows no problems for me. It looks the same with or without putting a width on content. I even added a bunch more words and the footer still didn't cut anything off. So the padding does effectively work, at least in my case.

However, based on what you said on the other answer, perhaps you could just change position:absolute on the footer to position:relative (assuming the footer won't have anything placed under it...and I'm guessing not since it's a footer). It makes sure the footer is placed after the content instead of being placed on it. Be wary, though, and make sure to check it in many different cases (browsers and devices).

I would also include a margin-bottom on the content, just in case.

Answer 3

Try adding the following CSS rules to the #footer element:

position: fixed;
clear: both;

This will give you a sticky footer (if I got what you want to do correctly) that does not overlap with the main content. You can probably loose the clear: both part, but it may help with some browsers...