The problem is one that usually rears its ugly head with two and three column designs (though for now, we'll just worry about two columns). If your two columns each have a different background color, how do you make the colours extend to the bottom of the page using css? Equal height columns are difficult to achieve using height and overflow properties. Each column will be of a different height, and you do not always know which is the taller of the two. It is all too easy to end up with a site where one column just doesn't extend all the way to the bottom of the page, where it should end.

CSS does actually include a rather nifty little tool that can be used to work around this problem, the "min-height" declaration, that allows you to specify a minimum height for an element - which you can use to ensure that one specific column is always larger than the other, allowing you to avoid this problem. Unfortunately (and perhaps unsurprisingly) Internet Explorer does not support this declaration, so in practice it isn't a useful solution to the problem.

Dan, in his article (which if you haven't read yet, I suggest you do before continuing), outlines a solution he uses on his own site. This solution involves tiling a background on the page, to give the appearance that there are distinct columns that extend the full length of the page. It's a simple but clever solution, and can be seen in use on a great many sites on the web.

During the recent redesign of this site, though, I came across a small problem. Though Dan's solution is perfect for fixed-width layouts, it just wouldn't work with a percentage-based, liquid layout. The problem was simple - a graphic cannot alter itself based upon the user's screen. If you come up with a background image like the below, and tile it on a page, the left hand column will need to be 200 pixels wide. If your column is 20% of the page, though, that could make it anything from 20 to 2000 pixels - and as a result your columns will rarely look as you intended. This makes equal height columns in liquid layouts a tricky proposal.

However, Dan's solution can be used to apply a background to a page when the layout is liquid, using background positioning.

Background positioning can allow us to give our background the appearance of being liquid. When you positioning a background using pixels, you position the top left corner of the image. When you position a background using percentages or keywords, you don't. Instead, you position a point within the image itself. For example, let's say we have a page and a simple background image. We use the following to set and position the background:

The above will set "image.gif" as the background of the page. It will position the background 25% of the way across the page from the left, and 10% of the way down the page from the top. However, it is not the left hand corner that will appear at that point. It is the point 25% from the left hand side of the background image and 10% from the top that will appear at that point, like so:

We can use this to apply a background to a page that will give the illusion of a pair of columns, even though the columns are not of a fixed width. Let's say we have two columns (for now), of 25% and 75% width. We can create a simple image, 1 pixel tall by 2000 pixels wide (why so wide will become apparent shortly - but don't be afraid to go even larger if you wish - 4000 pixels wouldn't necessarily be a bad thing). We want the left column to be a nice shade of orange, and the right a nice shade of grey, with a black line to divide them. So the image needs to have a black line 25% of the way along, with everything to the left orange and everything to the right grey, like so (scaled for visibility):

Now, we position the background using the following CSS:

Now, if you were to draw a line down the page, 25% of the way across from the left hand side, then 25% of our background image would be to the left of that line and 75% to the right. If we use the 2000 pixel wide background mentioned earlier, and position it as above, we'll have an orange background for 25% of the page, a black line, then grey will fill the remaining 75% of the page. You can see an example of that here. If you resize your browser window, while viewing the example, you will see the columns expand and contract to maintain the same proportions of the columns. With a little imagination, and the use of partly transparent background images, you can create image borders between elements using the same technique.

A little markup and a little more CSS, and we can turn the above into a respectable liquid page, with columns that expand and contract with the users' windows, and always extend just as far as they are needed. A more complete example is here, and this technique is also in use at this very site [please note that this technique is in use in versions 3, 4 and 5 of this site, accessible through the footer], allowing the flexible navigation and content columns to always appear equal in length, despite the fact they almost never are.

"Why", you may well ask, "would keyboards be designed to make typing slower?". A good question. Back when Christopher Sholes created the Qwerty layout for his new typewriter in the 1800s, it solved a problem. Economics has kept it in place ever since.

The main problem Sholes faced was that of bars colliding during typing. If two keys near each other were pressed quickly in succession, the bars they controlled sometimes collided or jammed. In order to avoid this problem, Sholes re-arranged his keyboard so that common combinations of letters were hard to type, thus making the keyboard slower and reducing the chance of jamming.

The other reason for the placement of some of the Qwerty keys in certain places was to boost typewriter sales. In order for salesmen to be able to sell typewriters, it was important that they not be seen 'hunting and pecking' during demonstrations. R was moved for this reason, and replaced the period on the left of the T.

That is why, if you look once again at your keyboard, you will see that commonly typed pairs of letters are well spaced out, and that the word "typewriter" can be typed using just the letters on the top row.

Once the Qwerty layout was in place, it was simple economics that kept it there. Typists were trained to use it, which meant that makers of newer typewriters had to use the same layout, otherwise potential customers would need to re-train staff. The same has applied ever since - people make Qwerty keyboards because that is what people are trained to use, not because it is the best layout.

The Qwerty layout

The Dvorak layout

Dvorak is an alternative to Qwerty. It is a keyboard layout designed to minimise movement, and make typing as easy and painless as possible. The idea behind it is to have the most commonly typed keys under the fingers, and make it as easy as possible to type common words and combinations of letters. To give an impressions of just how big a difference this makes, consider that the average Dvorak typist's fingers will travel about one mile in a day of typing. A Qwerty typist's will travel anything from 16 to 20 miles. Try to consider, for a moment, the effect that must have on your fingers.

Dvorak is easy to pick up, taking about half as long as Qwerty. That is little comfort to those who are already familiar with Qwerty, as it means starting over. However, the benefits certainly make it worth spending a couple of weeks learning to type all over again. For many of us, that is actually a benefit, since many computer users never learned to type properly in the first place.

Changing your PC over to Dvorak is actually quite easy. In your Control Panel, in the Keyboard settings, you will see a tab for "Input Locales". If you want to use Dvorak, simply select a Dvorak layout from the drop down on this screen (please note - you may have to re-start running applications for the change to take effect within them).

Changing the keys themselves is actually the trickiest bit of the process. You have a few options though. Before you try and change your keys though, I recommend you learn to use the keyboard. If you wait before changing your keys over, you will avoid hunting and pecking, and your typing will be all the better for it. If you do want to change them, you can use stickers (probably the quickest technique), and some keyboards make it very easy to move keys around. There are also suppliers who offer specific Dvorak keyboards, though these are rare.

Take another look at your keyboard. Are you really happy using something that intentionally slows you down? Something that makes you move your hands and wrists far more than is necessary? Would you not rather use something that was designed to make your life easier?

Update, 4th April 2007: Josue Salazar changed his Macbook to Dvorak - in part, he says, because of this article. Check out the photoset: Dvorak Black Macbook Photo Set.