CSS Sticky Footer: A SitePoint Stumper

HTML & CSS
1

I posted about this earlier here

(But because it’s more than 4 months old and still not resolved, Sitepoint suggested I create a new thread.)

Anyways,
As you can see this footer is not positioning itself all the way across the screen when you resize the window to be smaller than the footer width. This is especially annoying in 800x600, as my websites are optimized for 1024x768.

I have re-attached a screenshot of what I mean.

I’ve also been hunting down other sticky footers:
http://ryanfait.com/sticky-footer/
http://css-tricks.com/examples/jQueryStickyFooter/

But they both have the same issue. (resize to 800x600 and scroll vertically to see what I mean)

There must be a way to resolve this issue… yes?
Hope this makes sense!
Thanks :slight_smile:

2

I used the div push for a sticky footer and would experience the same problem, but then I converted to Paul’s suggestion to use his sticky footer and it works perfectly. I believe in the thread that you refer to it was indicated to use that footer, but it appears you are still trying to use the div push technique

3

Never ever use Ryan Faits footer. It is broken in IE and Opera. Horrible :). He won’t even update the footer to make it work.

I haven’t looked at the code because I have to leave for work, but check out this sticky footer

4

Correct me if I’m wrong, but it’s ok to either pull the footer up over the bottom of the min-height: 100% pagewrapper, OR to pull the 100% pagewrapper up with a negative top margin itself. Either way is basically Paul’s method and neither require any <div class=“divitis”></div>.

5

You can, but if you pull the wrapper up via a negative margin then you have to top pad the first inner element equally (the h1 or whatever). I like to take care of it at the source (the footer area). I just give the last element inside the wrapper (probably a div) bottom pad equal to the height of the footer.

6

Hi,

I thought Ray and I clearly explained in the last thread that you posted that this has nothing to do at all with the sticky footer technique. :slight_smile:

What you are seeing would happen to any 100% wide element when other elements on the page are a fixed width.

Here is a minimal example.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0;padding:0}
#header {
    width:100%;
    height:100px;
    background:blue;
}
#outer {
    width:1024px;
    height:500px;
    background:red;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="outer"> outer </div>
</body>
</html>

Close the window then scroll to the right and you will see the header is cut short. This will happen in any layout like that and will happen on this forum page if you try the same approach.

It has nothing to do with the sticky footer and is simply that a 100% wide element is only as wide as the viewport and if you scroll outside of the viewport then that is greater than 100% so the element won’t be there.

If you set your sticky footer to have a min-width equal to the width of your layout then the problem would be avoided.

e.g. for the code I posted above.

#header{min-width:1024px}


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0;padding:0}
#header {
    width:100%;
    height:100px;
    background:blue;
    min-width:1024px
}
#outer {
    width:1024px;
    height:500px;
    background:red;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="outer"> outer </div>
</body>
</html>

If that doesn’t make sense to you are you are still unclear then ask more questions and we’ll try to clarify a little more. It would also help if we had a link to the layout you want fixed so that we can try this in a real example which may be more pertinent.:slight_smile:

7

Hey, thanks for the quick replies!
I greatly appreciate you sending over the link for http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm

This is exactly what I was looking for, as it doesn’t resize the footer when the window is smaller. I guess CSS Sticky Footer sites still need to update their code :stuck_out_tongue:

One more question about this. I am trying to find a way to have the footer be 100% width, rather then a set width. (To have the footer background go all the way across the screen at the bottom). However, when it set “width:100%” on the footer in CSS it gives me the same issue when I resize the window (that gap on the right)

Is there a working example of this for a “100% width CSS Sticky footer”?
Thanks

8

Hi,
I’ve got one here but it has a min-width set on the footer that is equal to the min-width on the #wrapper.

You have to address the footer rules separate from the #wrapper since the footer sits on it’s own.

If your #wrapper div has a fixed width then the footer must have that as it’s min-width or you will have the same problems you had before.

Paul has an example here, it just needs min-width:700px; on the footer and it will work fine at narrowed viewport widths.

You don’t really need to use display:table for IE8 anymore though. There is an updated method that you linked to above.