From 36b33927f7692fb41689c1848e3ca4f623514302 2017-01-19 17:18:08
From: Brett Smith <brett@sfconservancy.org>
Date: 2017-01-19 17:18:08
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.

---

diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index 0205f1c007436c27cf8808374ae04350873f2a40..295037455bdf0d8b59788f717c18535a17e82feb 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 {