CSS Sticky Footers - two horizontal scrollbars?

I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.

This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window li开发者_开发技巧ke it's supposed to?

The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.

overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.

Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.

However, there may be ways around it.

Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:

overflow-y: scroll;
overflow-x: hidden;

Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.

I researched and tried many techniques for sticky footers and found this one to work great:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.