CAVEAT - a Warning and an Explanation

Box Lessons was written way back in 2001. In CSS terms that's nearly archaic.

At that time, CSS was not used for positioning. Browser support was either poor or impossibly flawed, as with the then-popular Netscape 4.

This was bad because instead of using CSS, web designers misused table tags to achieve layout. Which failed in anything but the latest browsers for home computer screens -- it was no good for audio readers, cell phones, or really anything other than IE and Netscape. Which was completely at odds with the whole "write once, read anywhere" point of the web.

So Jeffrey Zeldman and the WaSP came up with a very neat hack that allowed keen web designers to use CSS by bypassing Netscape 4. The more-capable browsers would get your CSS, and Netscape would get a safe, unstyled page. Finally, the designer-rabble like me could get down and learn how to use CSS.

I figured the first thing that had to be done was a stable CSS version of the most popular web layout: main content in the middle, bordered by two side columns and a nice header box.

This was surprisingly hard to do. There was a double wall of inexperience combined with an as-yet unmapped minefield of browser issues. A handful of us bashed away at the problem, and I put my accumulated experience online as the Box Lessons. BL was a quick & dirty thing with just enough explanation to guide like-minded designers along. I figured some regular web-tutorial site would do a full version in a few months, and then I and everyone else could forget about the Box Lessons.

I was dead wrong. Everybody linked to Box Lessons instead. My hit-count went through the roof, my inbox exploded, I got invited to conferences, I co-authored a book through two editions, and I spent two years on the WaSP Steering Committee.

Meanwhile Box Lessons chugged along pretty much unmodified. Browsers came and went, and CSS became a minor growth-industry of experts and help-sites. But Box Lessons somehow maintained a rock-steady 1500+ hits a day. This has continued for five years now. I don't know why. It just seems to be what works for some people. A lot of some people.

And they send me the nicest thank-you notes. Box Lessons helped them get started on the web.

Which leaves me a little bewildered because Box Lessons has some real issues. Yes, the layouts still work, but they're full of workarounds for browsers that are as dead as dodos today. And the code syntax is just awful. These pages were patched-together demonstrations for other developers. They were never meant to be examples of good form back then, and today they make me cringe.

But Box Lessons didn't become a obscure historic artifact like it should have. Instead it's still a major starting point for thousands, and that leaves me with a bit of a problem. I simply don't have time to write a modern version, yet I'd be complete jerk to remove it just to save myself some embarrassment. Whatever I might happen think of the BL, it's still the all-important leg up for so many.

Hence this warning and explanation.

You're still most welcome to peruse the Box Lessons. Obviously it helps people in ways that I don't realize. Just please keep your eyes open. The reasons offered for WHY things are done are still good and will remain so. But almost all the browser workarounds listed here are useless today. You just don't need that stuff.

Maybe the Tantek box-width fix for the IE 5's still, though these days there are nicer methods for that if you look for them. But even the IE 5's are finally becoming rare simply because people need up-to-date browsers to keep viruses out.

You certainly don't need all the dreck we used to do for Netscape 4. Anyone still using that busted browser today gets crashed all over by the modern web, so you needn't feel bad that your site does too.

Today you should just write valid code. You will still have to do some workarounds for the few failings of the current popular browsers (and the numerous failings of the awful IE 6), but it's nothing like all the old stuff demonstrated here in Box Lessons. That era is well behind us.

So, caveat out of the way, if you're new to CSS, where should you go?

>Wikipedia - If you're brand new, then just looking up HTML and CSS can be a great help. Wikipedia gives a great introductory explanation to almost everything and this is no exception.

>CSS-Discuss - This is the CSS discussion list. Got a question? CSS-D can probably have it answered before I can even open my mail. Make sure you read the posting etiquette first, and check their own wiki of communal knowledge. That wiki is not just full of great information, but they keep it up to date.

>QuirksMode - This is a great, great resource for finding and dealing with the browser bugs of today, and ignoring the essentially dead browsers of the past. I like what he's done here.

>WaSP - Are you serious about the web and web standards? Then go to the WaSP. Read about who and why they are, dig into Learn for advice and tutorials, and check the daily Buzz to stay current.

>W3C - The source. The W3C writes our web standards. Bookmark the relevant specs, and dig around for the many helpful articles that they've published.

Bonus Advice

Always check the date on CSS websites and books. Since 2001 we've been swamped with new tutorials that get published and then are never updated.

A whole heck of a lot of it contains information and techniques that are simply obsolete, just like Box Lessons. Watch out for anything dealing with old browsers and not the new ones, and be aware that with years of practice we've sometimes figured out better ways of stringing the code than we did at the start. These older works are still very helpful, but keep your lights on for the inevitable sections that are no longer current.