Footer always arranged below

refs #7539

main/css/base.css

@@ -9,6 +9,27 @@
 pre {
     margin-top:40px;
 }
+html,body{
+  height: 100%;
+}
+#page-wrap{
+  margin: auto;
+  height: auto;
+  height: auto;
+  min-height: 100%;
+}
+#page-wrap:after{
+  width: 100%;
+  height: 150px;
+  display: block;
+  clear: both;
+}
+footer {
+  width: 100%;
+  height: 100px;
+  margin: 0px auto 0;
+  background-color: #f5f5f5;
+}
 
 /* chzn-select fix */
 select {
@@ -359,21 +380,6 @@ form .formw input {
     width: 110px;
 }
 
-html {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    min-height: 100%;
-}
-
-footer {
-    position: relative;
-    bottom: 0;
-    width: 100%;
-    height: 80px;
-    background-color: #f5f5f5;
-}
-
 #footer_left, #footer_center, #footer_right {
     margin: 20px 0 0 0;
 }

main/template/default/layout/footer.tpl

@@ -1,3 +1,4 @@
+
 <footer> <!-- start of #footer section -->
     <div class="container">
         <div class="row">

main/template/default/layout/main_header.tpl

@@ -37,7 +37,7 @@
 
 {% if show_header == true %}
 
-<div id="page" class="container"><!-- page section -->
+<div id="page-wrap"><!-- page section -->
     {# Bug and help notifications #}
     {% block help_notifications %}
     <ul id="navigation" class="notification-panel">
@@ -51,7 +51,7 @@
     {% include template ~ "/layout/topbar.tpl" %}
     {% endblock %}
         <header>
-            <div id="main" class="container">
+            <section id="main" class="container">
                 {% if plugin_header_main %}
                 <div class="row">
                     <div class="col-lg-12">
@@ -94,8 +94,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </section>
-        </header>
             <section id="menu-bar">
                 {# menu #}
                 {% block menu %}
@@ -103,12 +102,15 @@
                 {% endblock %}
             </section>
             <section id="breadcrumb-bar">
+                <div class="container">
                     {# breadcrumb #}
                     {% block breadcrumb %}
                     {{ breadcrumb }}
                     {% endblock %}
+                </div>
             </section>
-    <div id="top_main_content">
+        </header>
+    <div id="top_main_content" class="container">
     {# course navigation links/shortcuts need to be activated by the admin #}
     {% include template ~ "/layout/course_navigation.tpl" %}
 {% endif %}

main/template/default/layout/menu.tpl

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-default">
-    <div class="container-fluid">
+    <div class="container">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">