Skidoo (Lean) : CSS-Driven Layout

EM-based Column Widths?

As Gunther Pilz first pointed out to me, EMs have a nice advantage in that they allow your columns to scale in size with the user's base font. As the user increases his/her font size, so will the columns. This can have some interesting results with low-res users viewing your page with a super large font size, but overall I think it's an interesting approach that is worth consideration. At the very least, the pros and cons that come with this approach should offset each other.


The purpose of this layout is to try and provide a simple, lean version of the original skidoo layout. A lot of the extras found in the original have been removed in hopes of curbing some confusion and showing just the basic structure of the layout. Most extras from the original can still be applied to this layout, if so desired.


The impulse for creating this page comes from comments found appended to an ALA article on negative margin layouts. In the comments, the original skidoo layout was offered up as a reference to help some other users. One person had commented on spending hours with skidoo and having problems understanding it. Part of the reason I had broken the original layout down into multiple stylesheets was to break down the CSS structure in a logical manner. I wanted to make the CSS bite-size and easier to understand, but it appears I may have shot myself in the foot by doing so.

This layout has one lean and mean stylesheet. It's heavily commented and, by comparison to other stylesheets, very small. Hopefully this will allow CSS developers to step away from the overly complex original and enjoy a more lean, striped-down layout. This (hopefully) will allow developers to get a better undstanding of what the core CSS does.

What's Missing?

Missing from this layout are the horizontal and vertical navigational elements based on unordered lists. Also missing is support for older (version 4 and earlier) browsers. CSS is imported to keept IE4 and NN4 from seeing the CSS. This means those, and other non-CSS browsers, will see only a flat file, so markup will certainly be important. You could hide some <hr /> tags to add a small amount of visual and logical separate between content components and have them hidden via CSS, but I don't do that here because this is lean.

Source Ordering

If you want the right column to appear after the middle column in your markup (and so for any browser or search engine viewing your page content in a linear fashion) you may do so by simply moving the entire #rightColumn block below the #contentColumn block. The only caveat to doing so is that you will not be able to apply the v4 stylesheet from the original layout which lays the page out in 3 column fashion for version 4 (NN and IE) browsers. So if you don't care about v4 support, go ahead and do it.

Middle-column-first is a little more complex so I'll leave that out of this lean layout, although I may include a demo doing just that sort of thing using this lean layout.