PDQ Library:  Footers at the Bottom of the Screen

How to push a Footer to the bottom in a short page

This is a solution for a short page that would normally display the footer information in the middle of the display screen.  The CSS styles below will allow you to create a normal web page with the footer displayed at the very bottom of the page - unless the display is very small of course then it pages normally.

Follow these rules for using the style code below: No content can be outside .wrapper and .footer div tags unless absolutely positioned. No content can be inside .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

HEAD section - Style Tag

<style type="text/css"><--
html, body {height: 100%;}
* {margin: 0;}
.wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -2em;
      }
.footer {text-align:center;}
.footer, .push {height: 2em;}
--></style>

BODY section

<body>
<div class="wrapper">
      ...CONTENT GOES HERE...
<div class="push"></div>
</div>
<div class="footer">
      ...FOOTER GOES HERE...
</div>
</body>
TOP back