Yesterday I noticed that my new home page was a disaster in IE7. I’d cribbed a CSS-based three-column layout from Google’s Page Creator. Then, as is my custom, I’d pruned away as much of the complexity as I could. But evidently I pruned too much of, or the wrong parts of, the the CSS gymnastics encoded in that example. So I wrecked the layout for Internet Explorer.
As per comments here, standards support in IE7 is a thorny issue and discussions of it are heavily polarized. But I aim to be (cue Jon Stewart) a uniter not a divider. So here I simply want to give props to this article by Matthew Levine, from A List Apart. From it, I cribbed the wrapper-free Holy Grail. It’s a minimalistic CSS-based three-column layout that seems to work well in every browser I’ve tried: IE6, IE7, Firefox, Safari.
To be honest, although I’m hugely fond of CSS styling, I’ve always struggled with CSS layouts, and I know I’m not the only one in that boat. When you read the explanation in Matthew’s article, you can see why. CSS layout is like one of those games where you slide 15 tiles around in a 16-square matrix. In principle it is a declarative language, but in practice the techniques are highly procedural: Step 1, Step 2, etc.
Whether that’s good or bad, and to what extent CSS layout really does trump table-based layout — these are interesting questions but separate discussions. The bottom line here is that I wanted to do a CSS-based layout, I wanted it to be as minimal as possible so I’d have the best shot at understanding and maintaining it, and I wanted it to behave reasonably in a variety of browsers. For that I needed the pattern, or recipe, which Matthew’s article helpfully provided.
It’s appropriate that he calls the technique the Holy Grail because the three-column layout applies very broadly. Yet, though there are tips and tricks all around the web, I’m not aware of a well-known cookbook, or pattern library, that:
- Identifies the handful of most popular layouts.
- Illustrates minimal, bare-bones CSS treatments.
- Certifies those treatments for cross-browser use.
For extra credit, this cookbook could filter the recipes according to whether support in each of the major browsers is must have or nice to have or optional.
Cross-browser issues have always been a headache, they still are, and the reality is that dealing with them requires hacks. The more we consolidate and simplify the hacks, a la Matthew Levine’s holy grail, the better.
As part of the Yahoo! UI Library (YUI), Yahoo released a CSS “Grid” framework (http://developer.yahoo.com/yui/grids/). The CSS that implements the framework probably isn’t simple (I haven’t looked at it too closely), but applying the framework couldn’t be easier. Creating any one of a huge number of layout permutations is a matter of inserting a few DIVs and attaching the relevent classes/ids. As with the javascript portion of the library, the cross-browser support of the grids framework is outstanding.
I can’t say enough about the work Yahoo has done on this.
Seconding the YUI effort. I don’t personally use them but they suit your requirements.
IE 6 did not do you any favors either. Any wonder why it is so difficult to create a “univeral” website.
Thirding the YUI grid stuff. I’m in the final throes of migrating my online todo list app over to it, and it’s been an easy operation.
When choosing a fluid layout, one of my primary requirements is ensuring that it doesn’t do something unexpected (or unpredictible to the average user) when resizing the window. A secondary requirement has always been Source-Ordered markup.
As a number of fluid 3-column CSS designs, Matthew Levine’s included, violate either one or the other of these two requirements, i have often forgone them altogether.
When forced to chose, i value the secondary requirement more highly than the first as i weigh in heavily on the usability side of things.
That said, while i havn’t tried the 3-column fluid YUI example, i highly endorse the YUI Grids system for being easily plug’n’play. I look forward to testing how their 100% fluid Grid performs with 3 columns under squashed conditions…
I learned HTML early on and since I didn’t earn my living doing that sort of thing I have never made the transition to CSS (although I can usually make an existing CSS set-up do something slightly different). I suspect most web designers these days are using some high level tool to generate most of their content and it won’t be long before doing HTML or CSS directly takes its place along side punched cards in the arcane history of computing.
The sad thing is that the original HTML, couples with frames and/or tables can accomplish the same results, rendered much faster with less stuff to download, and these primitive tools were designed to be approachable by the average content creator.
This is much the same as lamenting that kids these days don’t know the basics of programming. they’ve been raised to drag and drop templates, tinker with canned settings, fiddle with color schemes, and then get into big big trouble when asked to change something in the underlying logic of the “program”. More than once I’ve heard them say “I can’t make it do that!”
I don’t know the solution. Maybe the inventors of Visual Basic have some ideas.
Fourthing Yahoo UI Grid layout.
I, like you, spent lots of time looking for the canonical 3-column cross-browser layout. Yahoo Grid is easy to understand, and if you use their nifty reset.css you also get a clean plate to start out with — no strange fonts or other hang ups. I’d like to see a CSS 101 book that takes you through all of the Yahoo UI stuff; it would be an ideal way for novices like me to learn the sometimes difficult-to-understand interactions of CSS.
Oh, and I use Firebug as an educational tool. Does IE 7 have such a neat way to identify DOM elements and styles?
Jon, one thing you may wish to double-check is that your page is running in ‘standards compliance mode’ rather than ‘quirks mode’ – this can greatly affect your layout in IE and other browsers and it’s good to switch over sooner rather than later.
My team has been happy with the HTML 4 strict DTD, which puts you in standards mode without the super-strictness of XHTML. Just make sure that the line is the very first in the doc:
You can check which mode your doc is in using this trick:
http://www-03.ibm.com/developerworks/blogs/page/BillHiggins?entry=determining_quirks_mode_vs_standards
Quick overview of standards/quirks mode and thorough listing of which DTD puts which browsers in which mode:
http://hsivonen.iki.fi/doctype/
Oops, looks like your blogging software took out my DTD example – you can get it from the hsivonen.iki.fi site listed above.
One other thing, when messing with CSS, one of the most effective ways to work is to use Firefox’s Dev Toolbar and rapidly tweak the CSS in realtime using the dev toolbar’s “Edit CSS” function. Once you’re happy with the way your page looks, you can copy the rules you modified in “Edit CSS” (which go away when you close “Edit CSS” or navigate off the current page) back into your source CSS.
http://www.bluerobot.com/web/layouts/
“A secondary requirement has always been Source-Ordered markup.”
Yes, I noticed that and was bothered by it too. In this layout you can’t have left column first in the markup, then middle, then right.
“http://developer.yahoo.com/yui/grids/”
Excellent tip, and clearly a popular choice. Thanks!
Jon, sounds like you need to write a book… :)
“sounds like you need to write a book…”
Not on this topic, though. After my first one went out of print in a year, I vowed never again to put so much work into writing about specific technologies. They move too fast. I /would/ like to write a general-interest book on the professional use of blogging. By which I do not mean blogging for a living, which only a few can or should or will ever do, but rather blogging to advance your public agenda as a professional in whatever field you work in.
I made a proposal:
http://weblog.infoworld.com/udell/2005/12/29.html
But when I talked it over with an agent we agreed that the time is not yet right to reach many people with such a book. And if I ever tackle a project that hard again, I want at least a shot at reaching a lot of people.
Jon, Layout Gala may have what you need:
http://blog.html.it/layoutgala/
The generator over at Position Is Everything is pretty nice:
http://www.positioniseverything.net/articles/pie-maker/pagemaker_2_9_home.html
Position Is Everything have made a name for themselves in tracking CSS support in various browsers, so I trust anything they endorse.
I’m trying to do CSS based design (for clients), and it is so hard, that is unbelievable that this is the “better” way to do things.
Even this very simple layout, has lines and lines of code, and a hack!