Instant CSS Layouts with YUI Grids

Part 2 of the series Resurrecting a Dead Site

Modern Layout Techniques

Having decided that Control-Escape needed some work, it was now time to figure out what to do about it. The content itself was written in very basic HTML, which was wrapped in a template that generated the navigation and layout. I had been using a rigid, table-based layout originally created, oh, probably back in 2000 or maybe 2001. It was heavy and difficult to edit without causing ugly layout breakage. So my first step would be to update the layout to be lighter, easier to edit, and more standard-compliant.

I spent a few Google-hours researching CSS-based layout techniques. I was able to generate what I thought was a fairly decent layout using gleaned knowledge, but when I viewed it in a different browser, everything was misaligned and slightly off. After tweaking that for a while and making no progress, I went in search of some code I could steal emulate.

A long and boring trail lead me to the Yahoo! User Interface Library, where the experts who design one of the worlds largest web sites had decided to share their knowledge and, lo, some of their code too!

I quickly settled on using YUI Grids CSS to generate my standards-based layout. I figured, it has already been tested by Yahoo! engineers far smarter than me to work in multiple browsers, even ones I don't have. It's very easy to use, and it makes the HTML code nice and clean.

There really is no need for me to go into detail. The documentation is so straight-forward that further explanation is unnecessary. If you are in the market for a simple way to create cross-browser CSS layouts, you owe it to yourself to check it out.