I have all these great ideas floating around in my head for our web pages at any moment in time. Some of them are hilarious, never-will-do, ideas; but sometimes, I see something and I think: that should be easy enough to create for our page(s), right? Isn’t it just code that needs to be massaged? If I can figure out how to tease it just right, it should fit nicely in with our pages.
Sticky footers were such a piece of code that looked simple enough to implement. It’s just a footer at the end of the page; it is always hanging out down there; and, no matter how long or short the page scrolls, it stays at the bottom. Basically, it is a reverse (or mirror,) of a header that run across the top all the way, with the main part centered in the page. I wanted to use sticky footers because I was moving to templates on the re-designed pages; when using templates, the height of the page can vary, but the elements on the page stay the same. Well, what sounds easy isn’t always as such, as I (again) found out when I started to re-design our web pages. When will I ever learn? Probably, maybe, hopefully never, because I’m having too much fun finding solutions to problems.
Let’s start at the beginning of my struggle, and that always begins with research. Most sticky footers that I have seen go all across the bottom of the page, like so:
Then, there are sticky footers that always show “at the bottom,” even when, technically, it isn’t the bottom of the page:
I didn’t want either of these, exactly. I wanted something that stayed at “THE” “VERY” bottom of the page, and something that didn’t go all across the bottom. Like:
Doing a Google search, brings Mr. Fait’s page up first. Here is the css code for sticky footers:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer’s height */
}
footer, .push {
height: 155px; /* ‘.push’ must be the same height as ‘footer’ */
}
/*
Sticky Footer by Ryan Fait
*/
Placing this in a css document and saving it, or placing at the top of the html doc between <head></head> divs should give the effect wanted. That’s it! Everything should work…right? Not so fast, little grasshopper. I couldn’t get this code to work as easily as advertised. When this happens, one of the first things I do when I see a sample of code I like is to go into Firebug (this can either be built right in, as it is in Firefox, or it can be downloaded for most other browsers. This browser app working right in the browser to “show” the code/html/css used in the layout of the page. This little app is indispensable for web designers.) In this case, I am using Firefox, so, here it’s located on the top, left of the search box. It looks like a little bug, and might be grayed out:
Looking at Firebug revealed that this was a very simple layout. I’m sure it works great with designers who have very simple pages. Alas, my pages are complex, and maybe, er…messy, even. Plus, I have over 35 pages I maintain. As it, luckily, turns out: there are several designers who devote pages to nothing but creating sticky footers. And after searching, and using Firebug to explore those pages, I came across this one:
/*
Sticky Footer Solution
by Steve Hatcher
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {margin:0;}
.wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 5px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -70px; /* negative value of footer height */
height: 70px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:””;
margin:0;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J – negate effect of float*/
}
I liked this one a lot because the designer goes into explicit detail about how to incorporate this code and issues known to using it. Also, it had additional code for Opera and code for use on IE 6 and lower (although I didn’t use that part of the code, and anyone using IE 6, in my humble opinion, is a very sad potato, indeed.) However, the css document listed on this page still wasn’t enough for me. Firebug revealed that another css was also used (called finerstyle.css.) After I copied that css code and placed it in its own document, I finally made the code work exactly as I thought it would. Which, again, highlights the super power of Firebug. And why one should always investigate pages. That’s the great thing about the internet and Firebug. Working hand in hand, you can find what you need and how to use it. Having finally accomplished my perfect sticky footer, I turned my attention to building templates for the updated pages. I’ll discuss my adventures in templates next time. Until then, happy coding.
Library and Archives Preservation 
1 Comment