use wrap div with dynamic resizing

page.html

             print page.github
             print '">Fork me on GitHub</a></div></div>'
     %-->
-    <div id="nav">
+    <div id="wrap"><div id="nav">
         <ul>
             <li id="home"><a href="index.html">xythobuz.de</a></li>
             <!--%
                     print "</li>"
             %-->
         </ul>
-    </div>
+    </div></div>
     <div id="content">
         <!--%
             from datetime import datetime
             print '</script>'
     %-->
     <script type="text/javascript">
+        jQuery(window).resize(function() {
+            $('#wrap').css('height', $('#nav').css('height'));
+        });
         $(document).ready(function(){
+            $('#wrap').css('height', $('#nav').css('height'));
+
             var fontSize = parseInt($('body').css('font-size'), 10);
             var initialFontSize = fontSize;
             $('.inc').on('click', function() {

static/css/style.css

         left: 0;
     }
 
-    #content {
-        padding-top: 5em;
-    }
-
-    #index-avatar {
-        margin-top: 1.5em;
+    #wrap {
+        height: 5em;
     }
 }