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:

#Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

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

  ...