diff --git a/data/codebrowser.js b/data/codebrowser.js
index d59681c..93b8d76 100644
--- a/data/codebrowser.js
+++ b/data/codebrowser.js
@@ -1154,7 +1154,7 @@ $(function () {
         if (setStyle.toLowerCase() === title.toLowerCase()) styleOpt += " selected='true'";
         styleOpt += ">" + title + "</option>";
     });
-    $("#header").append("<p id='options'><a class='opt_linenum' href='#'>Toggle line number</a> -  Style: <select class='opt_style'>" + styleOpt + "</select></p>")
+    $("#header").append("<p id='options'><a class='opt_linenum' href='#'>line numbers</a> - <a class='opt_sidebars' href='#'>sidebars</a> -  Style: <select class='opt_style'>" + styleOpt + "</select></p>")
 
     var lineNumberShown = -1;
     $(".opt_linenum").click(function() {
@@ -1170,6 +1170,9 @@ $(function () {
         lineNumberShown = !lineNumberShown;
         return false;
     });
+    $(".opt_sidebars").click(function() {
+        $("#allSideBoxes").toggle();
+    });
     $(".opt_style").change(function(e) {
         switchStylestyleAndSetCookie(this.options[this.selectedIndex].value);
         //return false;
@@ -1238,7 +1241,8 @@ $(function () {
 
 /*-------------------------------------------------------------------------------------*/
 
-    $('#content').append('<div id="allSideBoxes">');
+    $('#content').before('<div id="allSideBoxes">');
+    //$( "#allSideBoxes" ).resizable({ handles: "n, e, s, w" });
 
     // The definitions side bar
     var dfns = document.getElementsByClassName('def');
diff --git a/data/common.css b/data/common.css
index f95b883..46c314d 100644
--- a/data/common.css
+++ b/data/common.css
@@ -8,15 +8,21 @@ a:hover{  text-decoration: underline }
 div#header { position:fixed; top:0; left:0; right:0; background-color: #f5f5f5; z-index:2; height: 5.2em; overflow: clip; }
 div#header+hr {position:fixed; top:5.2em; left:0; right:0; z-index:2}
 div#header input {-webkit-appearance:searchfield;-moz-appearance:searchfield;appearance:searchfield;}
-div#content { margin-top: 5.3em; }
+div#content { margin-top: 5.3em; overflow:auto;/*width:100%;*/height:calc(100vh - 5.3em);}
 
 /* Fixme: We could experiment around with max-height: 90 vh? */
 #allSideBoxes {
-position:fixed; margin-top:1ex; top:5.2em; right:10px; z-index:1;
-max-height:30em;
+    float:right;
+    display:inline-block;
+    /*background-color:#f5f5f5;*/
+/*position:fixed; margin-top:0px; margin-right:0px;top:5.2em; right:0px*/;/* z-index:1;*/
+/*max-height:30em;
+max-height:calc(100vh - 5.2em);
+height:calc(100vh - 5.2em);*/
+/*background-color:red;*/
 }
 .sideBox {
-padding:1ex; border-radius:0.5ex; overflow:hide; font-size:smaller; margin-bottom:1em;
+padding:0.5ex;overflow:hide; font-size:smaller; margin-bottom:0.5em;
 max-height:100%;
 }
 .sideBox h3 { text-align:center; width:100%; cursor: pointer; cursor: hand; margin: 0;}
@@ -26,6 +32,9 @@ display:block; overflow:auto; max-width:20em; max-height:20em; list-style:none;
 .sideBox li {
 list-style-type: none; padding: 0; margin-right: 1ex;
 }
+@media only screen and (max-height: 50em) {
+.sideBox {max-height:25em;}
+}
 
 .code { border-collapse:collapse; width:100%; padding:0 }
 .code { font-family: monospace; }
diff --git a/data/qtcreator.css b/data/qtcreator.css
index 1c38ba1..fd60110 100644
--- a/data/qtcreator.css
+++ b/data/qtcreator.css
@@ -19,5 +19,5 @@
 th.highlight { font-weight: bold; }
 th.highlight+td { background-color: #eee; }
 
-.sideBox { border: 1px solid #ddd; background-color: #eee; }
+.sideBox { /*border: 1px solid #ddd;*//* background-color: #eee; */}