#367299 by EclipseGc, JohnAlbin, geerlingguy, and Todd Nienkerk: Update and polish default page.tpl.php to make it easier for CSS designers to theme.

1 files changed, 26 insertions, 16 deletions

diff --git a/themes/stark/layout.css b/themes/stark/layout.css
index 193affb6d..0d87d6e2b 100644
--- a/themes/stark/layout.css
+++ b/themes/stark/layout.css
@@ -10,39 +10,49 @@
  *
  * This layout method works reasonably well, but shouldn't be used on a
  * production site because it can break. For example, if an over-large image
- * (one that is wider than 20% of the viewport) is in a sidebar, the entire
- * #main content can shift completely below the sidebar.
+ * (one that is wider than 20% of the viewport) is in the left sidebar, the
+ * image will overlap with the #content to the right. The exception to this
+ * is IE6 which will just hide the navigation block completely in these
+ * instances due to a positioning bug.
  */
 
+#content,
 #sidebar-left,
-#main,
 #sidebar-right {
   float: left;
   display: inline;
   position: relative;
 }
 
-#sidebar-left,
-#sidebar-right {
-  width: 20%;
+#content {
+  width: 100%;
 }
-
-body.one-sidebar #main {
+body.sidebar-left #content {
   width: 80%;
+  left: 20%;
 }
-
-body.two-sidebars #main {
+body.sidebar-right #content {
+  width: 80%;
+}
+body.two-sidebars #content {
   width: 60%;
+  left: 20%;
+}
+
+#sidebar-left {
+  width: 20%;
+  left: -80%;
 }
 
-body.sidebar-left #main-squeeze {
-  margin-left: 20px;
+body.two-sidebars #sidebar-left {
+  left: -60%;
 }
 
-body.sidebar-right #main-squeeze {
-  margin-right: 20px;
+#sidebar-right {
+  float: right;
+  width: 20%;
 }
 
-body.two-sidebars #main-squeeze {
-  margin: 0 20px;
+.section {
+  margin: 10px;
 }