Yesterday's experimental version of this page using CSS instead of table layouts proved insufficiently liquid in the face of font size changes. That seems to be a flaw of any layout involving absolute positioning. I've written a different layout that uses floats instead. Again, please check it out and let me know if anything looks too funky to live with. If so, please let me know what browser on what platform you're using. It seems to work well on all the browsers I have conveniently available, but I haven't tested IE5 for Windows yet.
This page looks better, but it's got one major flaw compared to yesterday's. In order to float the navbar on the right I had to move the div containing the
navbar to the beginning of the HTML before the content. This is a major hassle for anyone using a non-CSS browser, Lynx, or a screen reader. I really need to move the navigation after the main content. Any suggestions?
Several people commented on the overly long pre element.
That's a coincidence but it is a good test. What does/should a browser do with a pre element that's too wide for a page or a window or a panel?
A couple of people viewed source, and noted it wasn't valid XHTML. That's correct, and that's a deliberate decision. The page is well-formed, which is all XML processors need, and the additional markup I've added for my own use follows the longstanding principle that browsers should ignore any tags they don't recognize. Validity is overemphasized in XHTML. At one point, I did use modular XHTML to make the page valid. I even wrote about that in Chapter 7 of XML in a Nutshell. However, that broke way too many existing web browsers for me to seriously consider putting it into production. It's important that elements be used in the ways the spec intends them to be used. It's not important that there be no other elements about which the spec says nothing.