Changeset - 36b33927f769
[Not reviewed]
0 1 0
Brett Smith (brett) - 7 years ago 2017-01-19 17:18:08
brett@sfconservancy.org
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.
1 file changed with 13 insertions and 5 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -181,21 +181,29 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 

	
 
#container {
 
    width: 100%;
 
    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 {
 
    text-align: center;
 
    list-style: none;
 
    padding: 3px 10px 3px 10px;
0 comments (0 inline, 0 general)