| PDQ LIBRARY | |
|---|---|
| DOWNLOADS | |
| MY SOFTWARE | |
| WEB SEARCH | |
| VIRUSES | |
| SPY-WARE | |
| HOAXES | |
| PHISHING | |
| DOMAIN NAMES | |
| COOKIES | |
| SPAM | |
| COUNTRY CODES | |
| PROVINCE CODES | |
| HTML | |
| CSS STYLE | |
| FTP | |
| WIRELESS | |
| LINKS | |
| CONTACT US |
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>
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>
<div class="wrapper">
...CONTENT GOES HERE...
<div class="push"></div>
</div>
<div class="footer">
...FOOTER GOES HERE...
</div>
</body>
The PDQ Library is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.