HTML – CSS: Footer Always at Bottom

A basic template of a web page, where the footer section of the page remains always at the bottom of the screen, regardless from the content height.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Layout Example</title>
<style type="text/css">
html, body { 
    margin:0; padding:0; 
    font-size:12px; font-family:Verdana, Geneva, sans-serif; 

.container { width:900px; position:relative; margin:0 auto; }
.body { min-height:100%; position:relative; }

 * padding-bottom -> the "computed" height of the footer (height + padding).
 * In this example 20 + 10 + 10 = 40 (height + padding-top + padding-bottom)
.main { padding-bottom:40px; }

.header { background-color:#006600; color:#FFFFFF; margin-bottom:10px; padding:10px; }
.page { background-color:#CCCCCC; padding:10px; }

.footer { position:absolute; bottom:0; display:block; width:100%; z-index:1000; }
.footer .container { 
    background-color:#000000; color:#FFFFFF; 
    padding:10px; height:20px; 


<body><div class="body">
<div class="main container">
    <div class="header"><strong>Header</strong></div>
    <div class="page">Page content</div>

<div class="footer">
    <div class="container"><strong>Footer</strong> <em>always at bottom ;)</em></div>


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.