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.
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.
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.
Nope. If you're familiar with skidoo or skidoo lean then the rest has already been covered.
A shameless self plug:
Skidoo Too : Gargoyles
is a modified version of this layout. It has some nifty features that you might be interested
in investigating.
If you've ever thought about looking to make a donation to Ruthsarian Layouts, you'll want to check out Skidoo Too : Gargoyles.
And if you've ever thought that anyone looking to donate money for a CSS-based layout is just really crazy, you'll want to check out Skidoo Too : Gargoyles.