diff --git a/module/doc/css/common.css b/module/doc/css/common.css
index 276e1429d8..64e8a67479 100644
--- a/module/doc/css/common.css
+++ b/module/doc/css/common.css
@@ -104,6 +104,7 @@ ol, ul {margin-bottom: 0}
 #subHeader .list-group>a.selected {color: #e9f2fb !important;}
 #pageNav #dropMenu .table-col .list-group .icon-move {display:block; float: left; font-size: 12px; padding: 3px 4px 3px 1px;}
 
+#content .detail-content {overflow-y: auto; height: calc(100vh - 200px);}
 #aclBox .acl-tip {color: #838a9d;}
 .ajaxCollect > img.star-empty {margin-right: 0px;}
-#outlineMenu {position: absolute; height: calc(100vh - 200px)!important; overflow-y: auto;}
+#outlineMenu {position: absolute; height: calc(100vh - 200px)!important; overflow-y: auto; top: 50px; right: 20px;}
diff --git a/module/doc/css/view.css b/module/doc/css/view.css
index 5d93946feb..9d3f5f0e0b 100644
--- a/module/doc/css/view.css
+++ b/module/doc/css/view.css
@@ -23,10 +23,10 @@
 .article-content .keywords {margin-bottom: 15px;}
 
 .article-content {width: 100%; display: inline-block;}
-.outline {position: relative;}
-.outline .outline-toggle i.icon-angle-right, i.icon-angle-left {width: 18px; height: 18px; border-radius: 50%; position: absolute; padding-left: 2px; padding-top: 1px;}
-.outline .outline-toggle i.icon-angle-right:before {content: "\e314"; cursor: pointer;}
-.outline .outline-toggle i.icon-angle-left:before {content: "\e315"; cursor: pointer;}
+/* .outline-toggle i.icon-angle-right, i.icon-angle-left {width: 18px; height: 18px; border-radius: 50%; position: absolute; padding-left: 2px; padding-top: 1px;} */
+.outline-toggle {position: absolute; right: 20px; top: 50px;}
+.outline-toggle i.icon-angle-right:before {content: "\e314"; cursor: pointer;}
+.outline-toggle i.icon-angle-left:before {content: "\e315"; cursor: pointer;}
 .outline ul li {list-style: none;}
 .outline-content {display: none; padding-top: 18px;}
 .outline-content a {color: #838A9D;}
@@ -58,6 +58,7 @@
 .panel {margin-bottom: 0;}
 .detail {margin: 0 4px;}
 #mainContent > .panel {margin-bottom: 0; overflow-y: auto;}
+#mainContent > .main-col{flex: auto;}
 
 .info .version, .info .crumbs {float: left;}
 .crumbs img {margin-right: 3px; margin-bottom: 4px;}
@@ -66,3 +67,4 @@
 .crumbs .separator {flex: 0 0 15px; display: flex; justify-content: center; align-items: center;}
 .crumbs :last-child {flex: none;}
 
+.main-col {position: relative;}
diff --git a/module/doc/js/view.js b/module/doc/js/view.js
index c0eba22453..5fe8743961 100644
--- a/module/doc/js/view.js
+++ b/module/doc/js/view.js
@@ -141,17 +141,16 @@ $(function()
 
     $('.outline').height($('.article-content').height());
 
-    $('#content').on('click', '.outline .outline-toggle i.icon-angle-right', function()
+    $('body').on('click', '.outline-toggle i.icon-angle-right', function()
     {
-        $('.article-content').css('width', '85%');
         $('.outline').css({'min-width' : '180px', 'border-left' : '2px solid #efefef'});
         $(this).removeClass('icon-angle-right').addClass('icon-angle-left').css('left', '-9px');
         $('.outline-content').show();
         if($('#sidebar>.cell').is(':visible')) $('#sidebar .icon.icon-angle-right').trigger("click");
-    }).on('click', '.outline .outline-toggle i.icon-angle-left', function()
+    }).on('click', '.outline-toggle i.icon-angle-left', function()
     {
-        $('.article-content').width('100%');
         $(this).removeClass('icon-angle-left').addClass('icon-angle-right');
+        $('.outline').css({'min-width' : '180px', 'border-left' : 'none'});
         $('.outline-content').hide();
     }).on('click', '#outline li', function(e)
     {
diff --git a/module/doc/view/content.html.php b/module/doc/view/content.html.php
index 594364b181..ad693bd0f1 100644
--- a/module/doc/view/content.html.php
+++ b/module/doc/view/content.html.php
@@ -73,7 +73,7 @@
             <?php endif;?>
           </div>
         </div>
-        <div class="table-row">
+        <div class="">
           <div class="detail-content article-content table-col">
             <?php if($doc->keywords):?>
             <p class='keywords'>
@@ -144,14 +144,6 @@
             <?php endif;?>
             <?php endforeach;?>
           </div>
-          <?php if(!empty($outline) and strip_tags($outline)):?>
-          <div id="outlineMenu" class="outline table-col">
-            <div class="outline-toggle"><i class="icon icon-angle-right"></i></div>
-            <div class="outline-content">
-              <?php echo $outline;?>
-            </div>
-          </div>
-          <?php endif;?>
         </div>
       </div>
       <?php echo $this->fetch('file', 'printFiles', array('files' => $doc->files, 'fieldset' => 'true', 'object' => $doc));?>
@@ -159,6 +151,14 @@
         <?php common::printPreAndNext($preAndNext);?>
       </div>
     </div>
+    <?php if(!empty($outline) and strip_tags($outline)):?>
+    <div id="outlineMenu" class="outline table-col">
+      <div class="outline-content">
+      <?php echo $outline;?>
+      </div>
+    </div>
+    <div class="outline-toggle"><i class="icon icon-angle-right"></i></div>
+    <?php endif;?>
     <div id="history" class='panel hidden' style="margin-left: 2px;">
       <?php
       $canBeChanged = common::canBeChanged('doc', $doc);