One True Piefecta
Meanwhile, back at The Ministry…
For Operation Cleanup on the intranet, I needed a 3 column CSS layout, and I opted for One True Layout to create the page layout — cross-browser, fixed width, any order columns, fairly simple to understand. All in all, rather a neat solution, thank you Alex Robinson.
As you can see, the CSS is clean and tidy:
/* Fixed pixel version */
body { text-align:center; } /* Necessary for centering #wrapper in IE5.5 */
#content { float:left; width:550px; margin-left:180px; }
* html #content { display:inline; }
#sidebar { float:left; width:254px; }
#sidenav { float:left; width:180px; margin-left:-984px; }
#wrapper { width:984px; margin:0 auto; text-align:left; }
#footer { clear:both; }
#header, #footer { width: 984px; }
And the HTML is minimal as well:
<body>
<div id="wrapper" class="clearfix">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="sidenav"></div>
<div id="footer" class="clearfix"></div>
</div>
</body>
But when The Ministry saw the design, they wanted it changed to something more flexible, because a considerable percentage of their users have a maximum screen resolution of 800x600 pixels, poor buggers. (25% of their users still have Internet Explorer 5.5 :( ).
So, two fixed outer columns (also because I'm using fixed-width Mountaintop Corners as well). Plus a semi-liquid content centre column that has a max-width for legible line length and a min-width to maintain the structure of the page. “Gadzooks” I thought “where could I possibly find such a layout at such short notice?”.
Luckily I tripped over some Jello Piefecta, which is an eerily good fit for all of the above.
Piefecta is a three column CSS layout from way back in 2004, which I used on the UpMyStreet redesign in 2005. Jello is a technique for creating semi-liquid layouts that work in IE without JavaScript. Put the two together and you have a potent CSS layout cocktail which meets my needs perfectly.
The downside (there’s always a downside, no matter how good the news ;) is that the HTML structure is comparitively clunky, and the column order has to be 2-1-3 rather than 3-1-2:
<body>
<div id="sizer">
<div id="expander">
<div id="header"></div>
<div id="wrapper1">
<div id="outer">
<div id="float-wrap">
<div id="content"></div>
<div id="sidenav"></div>
</div>
<div id="sidebar"></div>
</div>
</div>
<div id="footer" class="clearfix"></div>
</div>
</div>
</body>
And the CSS is relatively convoluted, 70-plus lines long, with all the necessary comments.
I spent a few hours stripping out the unneccessaries, and trying to work out how get what I wanted (I used borders on the columns rather than margins to get around box model hacks for IE5.x), and to work out how adjust the column widths.
This has prompted me to consider publishing commonly used CSS/XHTML snippets of stripped-down code that can be used time over, by myself and also by others. The other candidates for such a repository would be lorem ipsum, XHTML templates, HTML entities, HTML color names etc.