Footer!

I have worked as web designer and web developer, and enjoy playing around with HTML codes in my own time, but when it comes to doing web the right way, I'm clearly a novice. In my experience, the most frustrating part of making a website, is the trivial mistakes you make along the way; forgetting to type 'px' when trying to position rollover image, writing too many notes that result in blasphemy when viewed in Firefox. Frustrating, because it is so easy to overlook.

Today, I felt like killing somebody because of a floating footer problem. There are many solutions offered, one of them is to stick the footer to the bottom of the page, as seen here (Thanks Mr. Taylor, it helps, too). While it would work on my other website projects, it causes a problem when the page is resized height-wise. As the page goes shorter, the footer covers everything else in between.

I found a very useful one from 47media (the article was apparently written three years ago, oh how outdated my problem is) here. Simply put, there should be a container that contains everything else, then create a space between the container and the footer with the same height as the footer, then place the footer. It works. Thanks 47media (their website is supercool, too)! Please refer to their page for more explanation. I have searched several pages before trying this one out. While some CSS purists might find the empty div container bothersome, I just found a peace of mind. Oh here's a little preview:

Thank you to a certain special person who keeps refreshing my blog! Keep the pixels coming!