Appendix IMiscellaneous notes
What's in a nameid/class?
Throughout this article and its assorted examples I use class names and ids such as #footer, #header, #block_1 and .verticalalignment. You shouldn't use identifiers like this in the real world.
Take for example #header. What's in it? If, I'm guessing here, it actually contains site identity stuff like logos, #site-identity (or whatever you prefer) would be better. Disclaimer legalese in the "footer"? Then use someting more descriptive like #site-legal or #legal-mumbo-jumbo. Because you might want to place you site identity at the bottom or doen the side, and then #header doesn't make any sense. It's the same reason really for not using class names like .red-bold-helvetica.
I'm using these names because this is an article with example code. In this case they really are properly descriptive. Unless you're writing a similar article, using simliar names will not be so for you.
Hacks vs conditional comments
Throughout the article I use hacks to deal with IE Win - that's just the way I like to do things. It also makes the example code here simmpler and clearer. And to be clearer still about the intent of the code: it is example code. I do not recommend that you cut and paste it (see the remarks about class names and ids above), but rather that you write it yourself after understanding the principles behind the techniques.
So, feel free to use conditional comments or plain voodoo if you prefer. But please don't bother telling me hacks are wrong etc...
Pixel perfection
Throughout the article, the working examples linked to are percentage-based. Consequently those examples, surprise surprise, are not pixel perfect and small gaps will occasionally (or rather, frequently) appear between the columns. One fix for such a three column layout is to set just the backgrounds of the side columns and let the background of the wrapping element paint the central column.
Personally I would avoid such layouts in a real life production situation, but I feel that it helps explain that the principles of the techniques better than using rigid pixel values. And others may not feel comfortable with grappling with the concept of scalable em-based layouts. So precentages, it is.
"It's broken in my browser..."
Yes, I know. Some of the examples have incorrect wrapping in Internet Explorer. At some window sizes. It's caused by a rounding error, a known problem with Explorer. If you read the section Danger Alex Robinson on the Any Order Columns page you'll see it mentioned in passing.
Try resizing your browser - you should see the column jump back and forth from its correct position to where you see it now. If you must use percentages, the solution is to feed Explorer a slightly smaller value for the problematic column, say 32.9% instead than 33%. I could have done that in the examples but frankly, what with the length of the article and wanting to concentrate on the bare minimum to demonstrate things, I chose to not include such refinements. If you go to the interactive demo, you'll see that there's a message advising about reducing values if wrapping occurs.
For obvious reasons the problem doesn't occur at all with pixel-based designs. And much less frequently with em-based ones, especially since I always make the wrapper just that little bit wider than it needs to be.
Of course, if you've found another problem with the layout, please make haste to let me know about it.
But what about...?
There are plenty of things that could have been added to this article.
At over 10000 words, though, it's already a bit of a monster and only issues that arise as a direct consequence of techniques discussed here are addressed. However I have tried to point the reader towards the most common problems that these techniques share with other approaches. If you think I've made any appalling omissions, tell me about it.