diff --git a/supporting-docs/_includes/footer.html b/supporting-docs/_includes/footer.html
index 14e9c2a5d..fc43ec97d 100644
--- a/supporting-docs/_includes/footer.html
+++ b/supporting-docs/_includes/footer.html
@@ -1 +1 @@
-  <div id="footer"><div id="footerContent">&copy 2014-2015 Matrix.org</div>
+  <div id="footer"><div id="footerContent">&copy 2014-2015 Matrix.org</div></div>
diff --git a/supporting-docs/_layouts/default.html b/supporting-docs/_layouts/default.html
index ff7f69f33..00ea25ce9 100644
--- a/supporting-docs/_layouts/default.html
+++ b/supporting-docs/_layouts/default.html
@@ -5,16 +5,16 @@
 
   </head>
   <body>
-  {% include nav.html %}
-    <br />
     <div class="page-content" id="page">
+      {% include nav.html %}
       <div class="wrapper" id="wrapper">
-        <div class="document_foo" id="foo">
+        <div class="document_foo" id="document">
       {{ content }}
+        </div>
       </div>
+      <div class="push"></div>
     </div>
     {% include footer.html %}
-
   </body>
 
 </html>
diff --git a/supporting-docs/css/site_overrides.css b/supporting-docs/css/site_overrides.css
index 700a09e1c..0f9a2c806 100644
--- a/supporting-docs/css/site_overrides.css
+++ b/supporting-docs/css/site_overrides.css
@@ -34,3 +34,24 @@ h1,h2,h3,h4,h5 {
     color: #333;
 }
 
+.page-content {
+    min-height: 100%;
+    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
+    height: 100%;
+    margin: 0 auto -33px; /* the bottom margin is the negative value of the footer's height */
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+.push {
+    height: 33px; 
+}
+
+#page {
+    margin-bottom: -33px;
+}
+
+#document {
+    margin-top: 10px; /* We want a little whitespace before the page content starts */
+}
+
diff --git a/supporting-docs/index.html b/supporting-docs/index.html
index 2a77562d0..5a874f069 100644
--- a/supporting-docs/index.html
+++ b/supporting-docs/index.html
@@ -11,5 +11,4 @@ layout: default
   <p>The <a href="./application_services.html" title="Application services">Application services</a> guide introduces and explains Application services, and what they can be used for.
   <p>Finally there is the <a href="./faq.html" title="FAQ">FAQ</a>, which tries to answer all your questions relating to Matrix!</p>
 
-
 </div>
