CSS Sticky Footers

I’ve been working on a website for a local daycare/preschool (Milestones Early Learning Center and Preschool) for several months, and it’s finally about to go live. It’s a small nonprofit organization, so I was hired to do everything from design to development to training. Since my skillset is much more on the development (a.k.a. programming, coding, etc.) side and not so much on the design (a.k.a. artistic) side, the site went through several visual changes; some were more technically trivial (e.g. trying out different colors) and others had more of a cascading effect, so to speak.

In this post, I’m going to focus on the very last problem I had: for whatever reason, Firefox was adding a one- to two-pixel horizontal scrollbar to the main page content element. Why? As it turned out, it had to do with the “sticky footer” I had added to the page.

What is a sticky footer?

You know how a lot of websites have some information down at the bottom of the page, like contact information or links to various pages around the site? It’s a great idea, and I wanted to do it for this site. The problem is, if you don’t know for sure that the page will have enough content to fill the browser window vertically, it becomes significantly more difficult to get that footer to stick to the bottom of the window; instead, it tends to stick to the bottom of the content.

Why doesn’t it stay at the bottom of the window?

Shouldn’t that be pretty simple to code? You’d think so, wouldn’t you? The reason, in a nutshell, is that CSS (the language used to give websites their aesthetic presentation) wasn’t designed to support this kind of thing; it’s much better at working with individual elements of a page than with the whole browser window. Plus, since different browsers render CSS slightly differently (especially older versions of Internet Explorer, which are still in widespread use today), you have to write it so that it will work in every major browser, not just ones that adhere to the standards well.

Since so many websites have this feature, the Sticky Footers problem has been solved many times over, and all I had to do to get it set up on this site was copy the code someone else had published.

What does that have to do with a horizontal scrollbar?

It turns out that the scrollbar was caused by the code I used for the sticky footers, plus a combination of other problems. For instance, Internet Explorer 8 wasn’t centering the page content like the other browsers were, so I added a new <div> tag and styled it to make IE8 happy. I was also using the fantastic 960.gs grid system, which played a small role in all of this, and my starting point for the whole site was the HTML5 Boilerplate. And, of course, the sticky footer code I copied from CSSstickyfooter.com:

html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
  overflow:auto;
  padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
}
/*Opera Fix*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/
}

So, what fixed the horizontal scrolling issue in Firefox? It turns out, changing this line:

overflow:auto;

to

overflow-x: hidden;
overflow-y: auto;

did the trick. It’s amazing sometimes how one seemingly-innocuous line of code can have such a wide-ranging impact. And yet, for whatever reason, I absolutely love to solve problems like this.