The plots now correctly appear above/below each other.

Committing before trying to combine all the manhattan plot
segments

2 files changed, 24 insertions, 12 deletions

diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css
index a0bdc159..7bfb10fb 100644
--- a/wqflask/wqflask/static/new/css/marker_regression.css
+++ b/wqflask/wqflask/static/new/css/marker_regression.css
@@ -1,7 +1,19 @@
-.manhattan_plot_segment
-{
-    height:400px;
-    width:150px;
-    float: right;
+.manhattan_plot_segment {
+    position:relative;
+    display:inline;
+    height: 400px;
+    width: 150px;
+    float: left;
     clear: none;
-}
\ No newline at end of file
+}
+
+.manhattan_plots {
+    clear: both;
+}
+
+.permutation_histogram {
+    display: block;
+    height: 400px;
+    width: 900px;
+    clear: both;
+}
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index b052d4a3..aeb05132 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -14,18 +14,18 @@
             </p>
         </div>
     </header>
-    
-    <!--<div id="manhattan_plot_1" style="height:400px;width:150px; "></div>-->
-    <div id="manhattan_plots"></div>
-    
-    <div id="permutation_histogram" style="height:400px;width:900px; "></div>
+
+    <div class="container">
+        <div id="manhattan_plots" class="manhattan_plots"></div>
+        <div id="permutation_histogram" class="permutation_histogram"></div>
+    </div>
 
 
     <!-- End of body -->
 
 {% endblock %}
 
-{% block js %}
+{% block js %}  
     <script>
         js_data = {{ js_data | safe }}
     </script>