From 36b33927f7692fb41689c1848e3ca4f623514302 Mon Sep 17 00:00:00 2001
From: Brett Smith <brett@sfconservancy.org>
Date: Thu, 19 Jan 2017 12:18:08 -0500
Subject: [PATCH] css: Implement #sidebar and #mainContent without floats.

170aa38bb5c3972293846aa4d86540b4967effab fixed one bug but added another:
#mainContent would always be the max-width of 1000px.  If the user's window
wasn't wide enough to accommodate that alongside the sidebar, it would be
rendered below the sidebar.

Fix that by using positioning instead of floats, so #mainContent can have a
flexible width.
---
 www/conservancy/static/css/conservancy.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index 0205f1c0..29503745 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -184,15 +184,23 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
     overflow: hidden;
 }
 #container #mainContent {
+    /* All the measurements here are relative to #sidebar's 13em width.
+       Leave enough space for it plus 1.5em margins on either side. */
+    position: relative;
+    left: 14.5em;
+    width: calc(100% - 16em);
+    max-width: 50em;
+    margin: 0;
+    padding: 0;
     background: #ffffff;
-    margin-left: 25px;
-    margin-right: 50px;
-    max-width: 1000px;
 }
 #container #sidebar {
-    width: 200px;
-    float: left;
+    position: absolute;
+    width: 13em;
     background-color: #ccd4a3;
+    /* Gives symmetry with the margin-top of the first h2.
+       1.25em font-size * 1.5em margin == 1.875em */
+    padding-bottom: 1.875em;
 }
 
 #container #sidebar li {