Featured Posts

Web Presense Solution I've officially started up my independent web development side-business. I am hoping to bring quite a few small businesses into the present with a simple, cost-effective package that provides them with...

Readmore

MS SQL date / time conversion I often find myself turning to MSDN to get the possible conversion options on MS SQL's date data type, so I finally became un-lazy and created a little script to use in the future to quickly list all possibilities...

Readmore

jQuery Delay Happy Note: I was contacted by the jQuery team and my code is being added to the core functionality; that really made my day!  You will want to remove the current code from your site if you plan on upgrading...

Readmore

ASP Search Stemmer Class The original stemmer class was developed by Martin Porter to bring words back to their word stems. For example "abilities" would stem to "able", "smelling" to "smell", "I'm awesome" to "damn straight",...

Readmore

  • Prev
  • Next

Attaching a footer to the bottom of the page

Posted on : 14-02-2010 | By : chelfers | In : Web

0

I've been messing around with positioning a footer at the bottom of a page for a few hours now and finally after trial and error have a workable solution that seems to be cross browser compliant.

My first thoughts were to absolutely position the footer element at the bottom of the page, but I knew that it would overlap content if the viewport was too small. I messed around with it for awhile playing with margins, heights, and padding with little success. The final result ended up being a combination of previous attempts minus the absolute positioning, and we found a winner!

The basic run down goes a little something like this

<style type="text/css">
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 0 -100px 0; }
#spacer { height: 100px; }
#footer { height: 100px; }
</style>
<div id="wrapper">
  <div>Here is some great content</div>
  <div id="spacer"></div>
</div>
<div id="footer">footer</div>

The cool part is that this works in IE6-8, Safari, and Firefox. The key components to cross browser compliance are the height attributes. The height 100% attributes of html and body are inherited by IE and mimic ( by bug? ) the min-height attribute stretching the wrapper element the entire length of the viewport.

The spacer element along side the negative margin attribute ( make sure that both numbers match ) help to offset the footer and keep it snuggled at the bottom of the page.

Write a comment