Skidoo Too : A 3 Column Layout

Minty Fresh Flavor!

And so it has happened, as was foretold; I have broken down and created a source-ordered version of skidoo. This layout has the middle column appearing first in the source.

I started with a copy of the skidoo lean stylesheet and cleaned it up considerably. I broke the stylesheet down into sections with a brief description of each. I've also added new comments to this stylesheet to try and better explain what's happening. But I'm still keeping everything within a single stylesheet, much like skidoo lean. Is it the best of both worlds? Maybe.

Why Care About Source Ordering?

You don't have to. You really don't. But, it's worthing considering.

There's a couple of reasons to care. The first is that some search engines will only read X number of bytes into your page before it stops and indexes whatever it got up to that point. If you're left and/or right columns come first in the source, and they're incredibly long, the search engine may have only indexed your side column(s) and never got to the meat of the page, the middle column.

The second reason is that browsers which do not support CSS will not see your page in a columned fashion. This means the content is presented in order of what comes first in the source. So each page a user visits will give them your navigation elements and whatever other stuff you've got in your side columns. With the middle column appearing first in your layout's source, the users of these browsers will get right to the meat of your page without having to search for it. The downside is that there may be important navigational elements in your side column(s) that you want to appear first. A way around this would be to add a link at the top of the page that links to an anchor within the page that's placed at the start of this important area. The link could say something like "jump down to site navigation" or whatever you want. You can hide this link using CSS so only non-CSS browsers will see it. Keep in mind that if you implement a horizontal menu, as I've done on this page, that will appear before the content as well. So perhaps the really important navigational elements go there, and then you don't have to worry about this. This is something you may want to think a bit about before deciding what to do.

The third reason is Mac IE. I'm still trying to figure this one out but it seems the negative-margin trick used to create the three-column layout in skidoo causes an issue with Mac IE's ability to select within the three columns. It seems that selecting text within the first element to come in the source of the document is... easier(?) than those that follow in the source. So putting the middle column first means selecting text from that column (should) be easier for Mac IE users (using Skidoo). Perhaps I can find a workaround and this third reason won't apply anymore, but for now, that's one of the reasons why I'm doing this.

Markup/CSS Changes

Minor changes were needed in both the HTML and CSS to get the source-ordered version working. Essentially I had to wrap the left and middle columns in a new div block and float that left. Inside this new #SOWrap div element I've right-floated the middle column, and then, just like in skidoo I left-float the left column and use a negative margin to push it left. The right column pretty much stays where it always has been.

On the CSS side of things I had to make the obvious float changes and I also had to move the right-side 1px margin, normally applied to #middleColumn, to the new #SOWrap element, since it's that element which touches with the left-edge of the right column.

About The Demos

There are some demos that are linked to in the left-hand column. Each demo uses the standard Skidoo Too stylesheet. The mods are created through embedded stylesheets which you can view by simply viewing the source of the demos.

In a real-world environment, you would not want to use embedded stylesheets. I'm using them because it makes the changes needed to achieve the effects seen in the mods very obvious and easy to focus on. What you should actually do is either put the embedded stylesheet in a separate CSS file and link to it with a link tag or modify a copy of the standard Skidoo Too stylesheet with the changes indicated in the embedded stylesheet. The latter, if nothing else, is a nice exercise in getting down and dirty with my style of authoring CSS. This way things might not feel so foreign later on when you want to make your own mods.

I know I ought to be more consistent with my documentation. It's incredibly thick in some areas, and incredibly thin in others, such as my lack of documentation on what the mods are/do/etc. If you've got any burning questions just give toss me an e-mail and I'll answer them.

Anything Else

Nope. If you're familiar with skidoo or skidoo lean then the rest has already been covered.

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

---

---