Keeping footer at the bottom of window on site that scrolls horizontal

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?

Answers


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;

}

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

The CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}

And one simple CSS rule for IE 6 and IE 5.5:

#container {
    height:100%;
}

There a two possibilities I see:

1st Option Force body to show the scroll bar always. But this may look strange.

body { overflow-x: scroll; }

2nd Option Have your content container always above your footer. this is possible if your footer has a fixed height. Then you will have the scroll bar above your footer.

<div id="contentWrapper">
    <div id="content">Here comes your content</div>
</div>

And here the CSS i'll explain now

body, html {
    height: 100%;
    overflow: hidden;
}

#contentWrapper {
    overflow-x:auto;
    overflow-y: hidden;
    height: 100%;
    margin-top: -16px; // add the footer height
}

#content {
    padding-top: 16px; // add the footer height
    width: 6000px;
}

The #contentWrapper has to have an negative margin in scroll bar height plus your footer height. The #content has to have the same value as top padding, so your content at the top will not be out the page.


My best idea would be to have the wide content as part of its own scrollable div. The footer would then stay in it's place at the bottom of the content, appearing to always be centered.

If you want the scroll bars to not be above the footer, you can probably do something fancy with a div and some css, such as put an empty div the size of the footer below the wide content and make the real footer have top: -(the footer's height)


Need Your Help

What is the difference between #encode and #force_encoding in ruby?

ruby encoding

I really do not understand the difference between #encode and #force_encoding in Ruby for the String class. I understand that "kam".force_encoding("UTF-8") will force "kam" to be in UTF-8 encoding...

Is there a standard button size?

android button

Is there a best practices size (in dip?) that buttons should be in order to be easily touchable?