3 column tableless layouts not so hard with the YUI CSS Grids Builder
Multiple column, table-less layouts using CSS isn’t so hard the CSS Grids Builder tool provided as part of the Yahoo! User Interface (YUI) library. Just enter the number of columns, the widths and positions, and presto - a very small XHTML footprint driven by some rather clever formatting wrapped-up into a nicely compressed cascading style sheets is your for the taking … free!
Even though I encourage church webmaster to leverage existing blogging system, content management tools, and such to create and maintain their church websites - from time to time, some of us need to create a page from scratch. And in the past, when it came to creating stuff like 3 column tableless layouts, well let’s just say that not everyone’s browser worked and played well with even the most careful design.
And while the blame rests clearly on broken browsers, the responsibility invariably lands on the shoulders of the web developer. For example, in the past I’d use the most excellent online ‘CSS Layout Generator‘ tool. However one need only look at the generated code to see the numbers of hacks, quirks and work-arounds required to see why not ever user experience was the same.
However yesterday, quite by accident - or perhaps should I say by ‘gAccident,‘ yesterday I stumbled upon Jeremy Zawodny’s review of the YUI CSS Grids Builder; and this free, online tool’s uniquely different, but effective approach to table-less mutli-column layouts.
As best I can tell from my experiments and the generated CSS, it appears to that the YUI approach is one in which all browser differences are nuked, or should I say ‘Reset‘ using CSS to remove and neutralize the inconsistent default styling of HTML elements — creating a level playing field across various brands of browsers.
In other words, no more having to “clear floats” through any variety of methods, no more ‘bodges’ to work around annoying issues such as dealing with the max-width in Internet Explorer 6, or imposing minimum widths with CSS in FireFox, max-width in Internet Explorer and so on. Instead, by leveraging the YUI CSS Framework one can dispense with many CSS tricks you may, or may not know.
Instead, one needs only to enjoy the YUI Grids CSS offering of four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns - the 4kb file provides over 1000 page layout combinations; including:
- Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
- Supports easy customization of the width for fixed-width layouts.
- Flexible in response to user initiated font-size adjustments.
- Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
- Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
- Layouts less than 100% are automatically centered.
I know this to be true because I gave a slightly modified version of the YUI generated CSS on multiple browsers both at my work — and using the cool, free, online multi-browser test tool offered over at Browsershots.com!
The only questions I have left to ask now are:
- How permanent is their BSD licensing? Meaning, will my church and/or charity get in trouble using this?
- As I examine the YUI, I have to ask, what’s in it for Yahoo! to provide all this free of charge? Or will I have to eventually run ads?
- How poorly will the upcoming release of IE8 mangle this approach?
Other than these three issues, I for one can’t see any reason not making the Yahoo! User Interface (YUI) library a pivitol piece of anyone’s “CSS Survival Kit.”
Categories: How-To, Resource Filled