Make footer stick to bottom of page

Author: smls

html/css/style.css

@@ -7,11 +7,14 @@ html, body {
 html {
     padding: 0;
     width: 100%;
+    position: relative;
+    min-height: 100%;
 }
 
 body {
     padding: 0 2em;
     width: auto;
+    margin-bottom: 5.5em;  /* max footer height */
 }
 
 .title {
@@ -207,6 +210,8 @@ td p {
 
 #formalities { font-style: italic; }
 
+#content-wrapper { padding-bottom: 2em; }
+
 #content {
     margin: 2em auto;
     overflow: hidden;
@@ -243,9 +248,18 @@ td p {
     padding-top: 0;
 }
 
+#footer-wrapper {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    margin: 0 -2em;
+    padding-bottom: 2em;
+    overflow: hidden;
+    max-height: 5.5em;  /* max footer height */
+}
+
 #footer {
-    margin: 2em auto;
+    margin: 0 2em;
     padding: 0 1em;
-    overflow: hidden;
 }
 

template/footer_template.html

@@ -1,4 +1,7 @@
 </div>
+</div>
+<div id="footer-wrapper">
 <div id="footer" class="pretty-box yellow">
 CONTENT
 </div>
+</div>

template/header.html

@@ -8,4 +8,5 @@
     </div>
     MENU
 </div>
+<div id="content-wrapper">
 <div id="content" class="pretty-box yellow">