Add additional div tags and use % based values for all properties instead of pixel based.

The core ideas of using multiple containers among other things as commented
in the CSS file are taken from
http://www.maxdesign.com.au/articles/css-layouts/three-liquid/# giving them
the due credits they deserve. Thank you very much guys. I was struggling to
get a fully liquid three-column layout.

I made some changes as per my ideas.

--HG--
extra : rebase_source : a071d5e0518ec9b772ac7fc60581fd8412cfa7dd

2 files changed, 22 insertions, 12 deletions

diff --git a/pytask/static/css/base.css b/pytask/static/css/base.css
index 0d698b6..b51c7ff 100644
--- a/pytask/static/css/base.css
+++ b/pytask/static/css/base.css
@@ -28,7 +28,14 @@ body {
   box-shadow: 0 0 1em darkslategray;
 }
 
-#container {
+/* Taken from http://www.maxdesign.com.au/articles/css-layouts/three-liquid/# */
+#container1 {
+  float: left;
+  width: 100%;
+}
+
+/* Taken from http://www.maxdesign.com.au/articles/css-layouts/three-liquid/# */
+#container2 {
   padding: 0px;
   margin: 10px 0px 0px 0px;
   background-attachment: scroll;
@@ -36,15 +43,17 @@ body {
   background-repeat: repeat-y;
   background-position: 0px 0px;
   height: auto; #default was 1%
-  width: auto;
+  float: left;
+  width: 100%;
 }
 
 #left {
-  margin: 0px;
+  margin: 0;
   width: 15%;
-  padding: 10px 20px 10px 20px;
+  padding: 1% 1% 1% 1%;
   float: left;
   border: 1px solid #ddd;
+  display: inline;
 }
 
 div #navheader {
@@ -106,11 +115,10 @@ div #navheader {
 }
 
 #center {
-  height: auto;
-  width: 54%;
-  padding: 10px 20px 10px 20px;
+  width: 56%;
+  padding: 1% 1% 1% 1%;
   float: left;
-  margin: 0px 0px 0px 6px;
+  margin: 0 0 0 1%;
   line-height: 1.8em;
   border: 1px solid #ddd;
 }
@@ -125,12 +133,12 @@ h1 {
 }
 
 #right {
-  padding: 10px 20px 10px 20px;
+  padding: 1% 1% 1% 1%;
   height: auto;
   width: 20%;
-  float: left;
-  margin: 0px 0px 0px 6px;
+  float: right;
   border: 1px solid #ddd;
+  display: inline;
 }
 
 .clearer {
diff --git a/pytask/templates/base.html b/pytask/templates/base.html
index d281cf8..6eba8d4 100644
--- a/pytask/templates/base.html
+++ b/pytask/templates/base.html
@@ -44,7 +44,8 @@
       <h2><a href="{% url home_page %}">PyTask</a></h2>
     </div>
 
-    <div id="container">
+    <div id="container1">
+    <div id="container2">
       <div id="left">
         {% include '_left_sidebar.html' %}
 
@@ -67,6 +68,7 @@
       <div class="clearer">
       </div>
     </div>
+    </div>
     <div id="footer">
       Designed by <a href="http://fossee.in">FOSSEE</a>
     </div>