- use relative/absolute positioning and greatly simplify everything,

works in chrome + safari

2 files changed, 24 insertions, 24 deletions

diff --git a/doc/build/static/docs.css b/doc/build/static/docs.css
index f9d60a45a..a740fc426 100644
--- a/doc/build/static/docs.css
+++ b/doc/build/static/docs.css
@@ -62,6 +62,7 @@ a.headerlink:hover {
 #docs-container {
   max-width:1000px;
   margin: 0 auto;
+  position: relative;
 }
 
 
@@ -184,11 +185,19 @@ a.headerlink:hover {
 
   border: solid 1px #CCC;
 
-  float:left;
-  min-height: 700px;
   z-index: 3;
   background-color: #EFEFEF;
 
+  position: absolute;
+  top: 120px;
+  bottom: 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+
+#docs-top-navigation-container {
+    background-color:#FFF;
 }
 
 #docs-top-navigation-container.automated {
@@ -199,11 +208,6 @@ a.headerlink:hover {
     background-color:#FFF;
 }
 
-#docs-sidebar.preautomated {
-  overflow-y: auto;
-  bottom: 0;
-}
-
 /* http://css-tricks.com/hash-tag-links-padding/ */
 #docs-container.preautomated div.section:before {
     content: " ";
@@ -213,8 +217,15 @@ a.headerlink:hover {
     visibility: hidden;
 }
 
+
+#docs-sidebar.preautomated:after {
+  content: " ";
+  display:block;
+  height: 150px;
+}
+
+
 #docs-sidebar.automated {
-    float: none;
     position: fixed;
     top: 120px;
     min-height: 0;
diff --git a/doc/build/static/init.js b/doc/build/static/init.js
index 6ea218e1d..0d3e678ba 100644
--- a/doc/build/static/init.js
+++ b/doc/build/static/init.js
@@ -11,24 +11,16 @@ var automatedBreakpoint = -1;
 
 function initFloatyThings() {
 
-    automatedBreakpoint = $("#docs-top-navigation-container").position().top;
-
-    parentOffset = $("#docs-container").parent().position().top - $("#docs-container").position().top;
+    automatedBreakpoint = $("#docs-container").position().top;
     containerHeight = $("#docs-top-navigation-container").height();
 
-    sidebar = $("#docs-sidebar").position();
-    if (sidebar) {
-        margin = sidebar.top - (automatedBreakpoint + containerHeight);
-    }
-    else {
-        margin = 0;
-    }
-    autoOffset = containerHeight + margin - parentOffset;
+    // TODO: calculate the '9' here
+    autoOffset = containerHeight + 9;
 
+    $("#docs-top-navigation-container").addClass("preautomated");
     $("#docs-sidebar").addClass("preautomated");
     $("#docs-container").addClass("preautomated");
 
-
     function setNavSize() {
         $("#docs-top-navigation-container").css("width", $("#docs-container").width());
     }
@@ -40,15 +32,12 @@ function initFloatyThings() {
             setNavSize();
             $("#docs-top-navigation-container").addClass("automated");
             $("#docs-sidebar").addClass("automated");
-            $("#docs-container").addClass("automated");
             $("#docs-body").css("margin-top", autoOffset);
         }
         else {
-            $("#docs-top-navigation-container.automated").css("width", "");
             $("#docs-sidebar.automated").scrollTop(0);
-            $("#docs-top-navigation-container").removeClass("automated");
-            $("#docs-container").removeClass("automated");
             $("#docs-sidebar").removeClass("automated");
+            $("#docs-top-navigation-container").removeClass("automated");
             $("#docs-body").css("margin-top", "");
         }