Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css: Implement #sidebar and #mainContent without floats.

Browse source 
170aa38bb5 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.
This commit is contained in:
Brett Smith 2017-01-19 12:18:08 -05:00
parent 59c03adb03
commit 36b33927f7
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
www/conservancy/static/css/conservancy.css
View file

@ -184,15 +184,23 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
overflow: hidden; overflow: hidden;
} }
#container #mainContent { #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; background: #ffffff;
margin-left: 25px;
margin-right: 50px;
max-width: 1000px;
} }
#container #sidebar { #container #sidebar {
width: 200px; position: absolute;
float: left; width: 13em;
background-color: #ccd4a3; 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 { #container #sidebar li {