/ Published in: HTML
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <!-- The second stylesheet is to make things look pretty. The first one is only the important one. --> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { text-align: center; } .wrapper { position: relative; width: 700px; font-size: 0.9em; margin: 0 auto -142px; text-align: left; } .header { height: 190px; background: url(header.png) no-repeat; } h1 { text-indent: -500em; } h2 { padding: 0 0 0.6em; color: #d00; font: 1.4em helvetica,arial,sans-serif; text-shadow: #ddd 1px 1px 2px; } p { padding: 0 0 1em; color: #666; font: 1em/1.4em arial,sans-serif; } a { color: #000; text-decoration: none; border-bottom: 2px solid #0bf; } a:hover { color: #0bf; } strong { font-weight: normal; } .download { position: absolute; right: 0; top: 160px; } .footer { position: relative; width: 700px; margin: 0 auto; color:#333333; background: url(footer.jpg) no-repeat; } .footer a { text-decoration: underline; border: 0; } .footer p { position: absolute; left: 0; bottom: 4px; width: 700px; padding: 0; color: #fff; font: 0.8em arial,sans-serif; text-align: center; } * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ } /* Sticky Footer by Ryan Fait http://ryanfait.com/ */ </style> </head> <body> <div class="wrapper"> <div class="header"> </div> <p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p> </div> <div class="footer"> </div> </body> </html>