slantastic
This time, in order to get the effect to come out right, I "interleaved" the floats. In order words, right-left-right-left-right-left. You can see it in the course; every other div is a class of either slant1 or slant2. It turns out that it has to be done that way, due to the way the CSS2 float model is written. I'd like to have been able to put all of the slant1 elements together, and follow them with all the slant2 elements, but that won't work the way I want. So browsers like Netscape 6.2, which follow this part of the specification to the letter, turn out to be harder to work with than Explorer 5.5 for Windows (as an example).
If you're visiting with IE5/Mac, the page may look horrifically broken (it seems to come and go). Sorry, there isn't much I can do about that. Oh, wait-- yes there is. I could have set all of the floats to have a width of anything other than zero or auto. If I set them all to be 1px wide, then the floats on the left wouldn't "blow up" to 100% width. Of course, that might also throw off the alignment of the floats. It's a trade-off, and a clever author could probably find a way to work this so that wasn't a major issue. Regardless, you'll notice that the text does flow into the right places. It's just the drawing of the floated elements that goes all wonky. If we'd made the borders white, then the text would have filled a pyramid shape without any real visual artifacts to interfere. There's probably a nifty cross-browser design in there somewhere.
Why is the text centered? It looked a little better that way. I could've fully justified it, or right-aligned it, or whatever. So could you.