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!