Hi, I've just built a new template for www.permaculture.org.nz It's a negative-margins design (I followed the original holy grail article on ALA) with em units for withs, flexible between 54 and 72 ems total page width (I might yet increase the maximum to about 80).
It is working well on most pages, but if something affects the width of the centre column, it in turn affects the position of the left-hand column. Problem 1: Centre column has narrow content, e.g. http://www.permaculture.org.nz/classified - the left column moves off-left. Problem 2: Centre colum is forced too wide (I don't currently have an example after putting limits on form field lengths) - the left column moves to the right and starts overlapping the main column. I've thought about trying min and max widths for the centre column (in either ems or %), but min-width would only be effective when the page is 54em wide and max-width when it is 72em wide. Since Drupal is such a mess of stylesheets, I'll extract my layout styles here: #container { position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */ clear:both; overflow:hidden; /* This chops off any overhanging divs */ padding-left: 13em; /* LC width */ padding-right: 15em; /* RC width */ margin-right: 10px; } #container .column { float: left; position:relative; } #content { /*width: 100%;*/ } #navcol { width: 13em; /* LC width */ margin-left: -100%; right: 13em; } #sidebar { width: 14em; /* RC width */ margin-right: -15em; border-top: 1px solid #999; border-right:1px solid #999; border-left: 1px solid #444; border-bottom: 1px solid #444; border-radius: 30px; background-color:#edece6; padding: 0.4em; } #sidebar section { border-bottom: 1px solid #fff; margin-bottom: 0.5em; padding-bottom: 0.5em; } #content-inner { margin: 0 0.5em; border-top: 1px solid #999; border-right:1px solid #999; border-left: 1px solid #444; border-bottom: 1px solid #444; border-radius: 30px; background-color:#edece6; padding: 0.8em; } -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
