Question

I’ve got a completely horizontal scrolling site,

TopNav (fixed position)

Nav (fixed position)

Content (sideways scrolling)

Footer (fixed position)

Everything seems to be working great but the problem I have is that if the content is big enough to scroll horizontally, it puts the footer behind the horizontal scroll-bar, so on a few pages I made the #footer { bottom:16px } or so to take into account horizontal the scroll-bar being there.

What i’m having issues with is different monitor resolutions. Obviously the content will scroll horizontally or not based on the window size. Is there any way to keep the footer at the bottom (or above the horizontal scroll bar) NO MATTER WHAT resolution or window size?

Answer 1

After a lot of trial and error, I found this to be the best solution for an always-on-the-bottom-footer:

HTML:

<div class="footer">

    <div class="footer_contents"></div>

</div>

CSS:

.footer {

    height:24px; // Replace with the height your footer should be
    width: 100%; // Don't change
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 0pt;

}   

.footer_contents {

    height:24px; // Replace with the height your footer should be
    width: 1000px; // Visible width of footer
    margin:auto;

}