How to add a “sticky footer” in html/css

First, let me start off by defining a “sticky footer,” for when I first googled this term, I had no idea what it meant. 

Def’n: a footer that stays at the bottom of your page no matter where you browse in the website (right, down, etc)

After I realizing I wanted a “sticky footer” versus a floating footer, I had to find out how to implement the code into my growing html script. I knew that I wanted it at the bottom, but wasn’t sure where after the main content in the body I should place the tags. 

I tried to put the <div tag after the closing of the body and before the closing of the html.

It didn’t work.  Why? I had forgotten the quotation marks around footer.   Also, I had not labeled the div as <div id= “…” I had somehow left these important punctuation out of my script.

Upon further thought and perusal of some class notes I took, I realized there was no reason why the footer shouldn’t be before the closing of both the body and the html tags.  Thus, I moved the div id up to the proper place.

After I moved it up, I started to question something. When I looked up the html script for a sticky footer, I just followed the example provided, without realizing there was a </div> tag above the div id tag for a reason. That question mark, that’s when I started to realize there must have been a start to that div tag that I had missed. 

Upon much perusal of the source code for this page, I found the opening of my div tag –> <div id=”outer”> <–and inserted it into my html script after my head and in my body (so the body had both <div> and </div> tags).

Afterwards, I realized I had forgotten that for every beginning of a tag, there must be an end.  This is a key rule that novice .html enthusiasts must remember! Good Luck!


~ by scw32 on September 19, 2011.

%d bloggers like this: