From b89409f82e4d8f2512561074749f9af46e53b242 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 13:57:03 +0200 Subject: [PATCH] Make tools sticky on screen's left edge So that the drawing canvas can expend full height --- css/style.css | 28 ++++++++++++++++++---------- css/tools.css | 4 ---- index.html | 45 ++++++++++++++++++++++++--------------------- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/css/style.css b/css/style.css index 04812bf8..a06d9012 100644 --- a/css/style.css +++ b/css/style.css @@ -12,10 +12,10 @@ body { text-align: center; font-size: 0; position: absolute; - left: 0; - top: 104px; + left: 104px; + top: 10px; right: 0; - bottom: 0; + bottom: 10px; } .left-column { @@ -35,19 +35,27 @@ body { font-size: 0; } -.top-section { - position: absolute; - bottom: 100%; - min-width: 400px; - margin-bottom: 5px; -} - .right-column { display: inline-block; vertical-align: top; margin-left: 10px; } +.sticky-section { + display: table; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 140px; +} + +.sticky-section .wrap { + display: table-cell; + vertical-align: middle; +} + /** * Canvases layout diff --git a/css/tools.css b/css/tools.css index 86fbc40b..14718617 100644 --- a/css/tools.css +++ b/css/tools.css @@ -5,10 +5,6 @@ float: left; } -.tools-wrapper { - width: 70%; -} - .tool-icon { float: left; cursor : pointer; diff --git a/index.html b/index.html index b4739327..370c5a7b 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,30 @@ + +
@@ -27,27 +51,6 @@
- -