This is the third generation of the Skidoo layout. It was developed from scratch to produce a new stylesheet that documents, in detail, every single quirk and hack in the layout. It also incorporates a new menu system that is just as researched and developed and compatible as any out there today. This is the most documented and most compatible version of Skidoo to date. It should prove useful both as a learning tool and as a template for creating new websites.
Skidoo is a float-based layout. This means that the major elements of the layout float. When an element floats it takes on some unique properties to which web developers might not be accustomed. The most troublesome of these is that floats wrap. This means if two or more floating elements are next to each other in a layout where there is not enough (horizontal) space to fit them both, one or more of the floating elements will be moved down the page until it finds a spot with enough space for it to fit. This creates a burden on the website developer/maintainer. You must be aware of and exercise control of space within your layout.
There is a problem: the user controls the dimensions of the viewport (the area within the
web browser window where the webpage is rendered). A float-based layout may line up perfectly
inside a viewport at 600 pixels wide, but shrink it to 500 pixels and you might see one of the
columns suddenly disappear to the bottom of the webpage. This is undesirable especially in a
three-column layout like Skidoo. So we must somehow force the webpage to render at or above
a set of minimum dimensions (usually we only care about width), so that the layout will not
break even as the viewport shrinks beyond these minimum dimensions. The simplest solution is to use
the CSS property min-width on either the body element or an immediate child that
wraps the rest of the webpage. However some browsers, such as Internet Explorer pre-version 7,
don't understand this property. The only other solution is to institute a JavaScript solution
that controls the size of these elements on the fly as the viewport is resized. Without either
of these solutions users will see a float-based layout start to break as the viewport is
narrowed. Thus the min-width feature is key to successfully implementing a float-based layout.
A related issue is that the content of a floated element should not hold larger dimensions than the space provided by the parent, floating element. For example in this layout the left and right columns have a specific width applied. If content were placed in one of those columns (such as an image) that was wider than the column's set width, the floated element (the column) would be pushed down the page until it found enough room to fit the content of the column. The column, because its content is wider than the column itself, will expand to contain it all. As it expands it goes wider than the space allowed for the column itself and that forces it down the page until there is enough room to fit.
This column-content issue is something that comes up a lot with people who use Skidoo or similar style layouts. This is why I'm going to dedicate the layout's demo site to discussion of the topic.
Now there are some ways to handle this. The first would be to set a specific width to the side columns so you understand your limits on content dimenions. By default this layout specifies side-column width in EMs. This means they shrink and grow depending on the size of the font used within the page. This can be a good thing and a bad thing. If you leave your content to just text, it's great because the columns will shrink and grow depending on the user's default font size. Users with eyesight problems will have wider columns to keep the content's relational space equal to those with smaller font sizes. However too big a font will squish the middle column out completely.
So what if you want to change the size of the side columns. The edits to the stylesheet are minimal and could also be placed in a secondary stylesheet (or theme if you'd like) to override the default values. The CSS would look something like this:
#outer-column-container {
border-width: 0 [right column width] 0 [left column width];
}
#left-column {
width: [left column width];
margin-left: [negative of left column width];
}
#rightColumn {
width: [right column width];
margin-right: [negative of right column width];
}
So if I wanted the left column at 200 pixels and the right at 300 pixels the CSS would look something like this:
#outer-column-container {
border-width: 0 300px 0 200px;
}
#left-column {
width: 200px;
margin-left: -200px;
}
#right-column {
width: 300px;
margin-right: -300px;
}
If we take the above dimensions into consideration we know the left column can't have any object wider than 200 pixels. Not so! We also must take padding into account, 10 pixels on each side (by default). This means we can't have anything over 180 pixels in the left column. For the right column the upper width limit is 280 pixels.
Now, by default, the page has a minimum width of 600 pixels. Take away the 500 already in use by the side columns leaves us with 100 pixels for the middle column, minus padding gives us 80 pixels. Ah, not so fast! We also have the margins on #page-container that separate the edge of the layout with the edge of the viewport. That's 14 pixels on either side, giving us an upper limit of only 52 pixels for anything in the middle column.
"FIFTY-TWO?!". Yep. Anything wider and the page would break at it's minimum width. You could shrink the right column to 200 pixels, giving you another 100 for a total of 152 pixels maximum width for any single object in the middle column. You could increase your minimum width from 600 to 800 and make it 352 pixels. You could drop the right column alltogether and give yourself 552 pixels of width to play with. Great! Except that's still a bit small, especially if you're showing large photos on your website.
The space problems brought about by this style of layout will frustrate many and others will simply throw this style of site out as an option for their development. So we need a legitimate way around these spacial issues. Well, here's the cheap fix:
<img src="logo.jpg" style="margin-right:-100%;">
A negative margin on any element will make the browser treat it less wide than it actually is. In this case, a -100% margin, the browser will treat it as if it had no width. If the viewport starts to shrink below the space needed to display the e image within the column, the image will overflow, but won't break the layout.
Let's be clear about this: the image will overflow. This means the layout will remain the same and the image will overlap whatever exists in the area to its right. If you've got content in the right column, and your image is in the middle column, your right column's content will be hidden beneath the image. Neither the middle column, nor the layout, will expand to contain the entire image. It's a cheap fix. It'll keep your layout from breaking, but could cause other problems.
You may also find text that would normally wrap around the image to be hidden underneath the image as the text is laid out with respect to an object with 0 width. A line break or use of a DIV could resolve such issues, but then you lose out on the ability to text-wrap the image. This is far from a perfect solution.
In fact I've yet to find a solid fix for this issue. But there is another
option, specific to images, that I've had success with. What you can do is
create a DIV element and set the image as the background of the
DIV. Give the DIV a 100% width and it will shrink and grow based on the available space.
As the column narrows, so will the DIV. At a certain point, the
image will start to be cropped. This allows you to put images into the content without
the problem of overlapping seen in the previous method.
Set the max-width property for the img element to 96% and
the height property to auto. This will make images shrink as needed. For
IE 6 and earlier (which do not understand max-width) you could set the
overflow-x property to hidden on the immediate parent element
that contains the image or other such content.
Everything you need to start working with your own copy of this layout is available for download right here.
Disney produced a television show in the mid 1990s called Gargoyles. It's a great show and I'm a big fan. A few years ago Disney started to release the show on DVD. The last release was of season 2, volume 1. That was two years ago. Volume 2 has not been released. Why? Poor sales. So if you should find yourself wanting to support my work, instead I ask you pick up a copy of season 2, volume 1. It's a great show and you might find yourself enjoying it.