Put footer at the bottom of the page

This only works if the page content is not bigger than the window.
Try it yourself or check it out at FixedFooter.

<!DOCTYPE html>
<html lang="en">

  <title>Fixed Footer Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style type="text/css">
  html, body, #container {
      height: 100%;
      margin: auto;
      text-align: center;

  #footer {
        margin: auto;
        text-align: center;


<div id="container">
    <h1>This is the main content</h1>
    <p>If it is bigger than the window, then the footer will play over it.</p>
    <p>The footer can be inside or outside of the container.</p>

<div id="footer">
    <p>This is the footer content.</p>


Leave a Reply

You must be logged in to post a comment.

Well Golly

Atheism Plus

Buy from Amazon