How to Position a Footer at the Bottom of the Browser in Firefox and Internet Explorer?

Positioning Footer at the Bottom with CSS

Many developers encounter issues when trying to position a footer at the bottom of a browser window. Despite following various techniques, the footer may appear in the middle instead. Here's a solution to this common problem for both Firefox and Internet Explorer.

CSS Code

The following CSS code will effectively stick the footer to the bottom of the browser:

<code class="css">#Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}</code>

Explanation

1. position: absolute;: Removes the footer from the normal document flow, allowing it to be positioned independently.
2. bottom: 0;: Sets the bottom edge of the footer to zero, which positions it at the bottom of the window.
3. width: 100%;: Ensures that the footer spans the entire width of the screen.

HTML Structure

Ensure that your HTML structure contains a

<code class="html"><form>
  ...
  <div class="Main" />
  <div id="Footer" />
</form></code>