A la A List Apart, I have been updating my presentation layer coding techniques to be compliant with modern XHTML and CSS standards. While I can certainly appreciate that adhering to these standards results in cleaner code that is easier to maintain, I have found that where element posisitioning is concerned I end up mired in a cross-browser compatibility nightmare the likes of which I haven’t been in since the days of the browser wars. Using nested HTML tables for page layout always bothered me in that it violated the principle of seperating content from structure and presentation. However, using CSS floating (I don’t use absolute positioning) to make a multiple-column page layout takes some masterful coding and/or use of hacks to make it work in multiple browsers! At least browsers can agree on how to render a table. Ever notice how so many of these starndards-compliant sites display all their text in one column centered on the page?
Below are some good resources on the subject, and some code generators for css layouts (the whole notion of a code generator for something as simple as a 3 column layout can take some getting used to – and don’t even think about more than 3 columns). Unfortunately, I wasn’t always successful in backing this code into existing site templates that I’ve made. So until I master the dreaded CSS float, I think I’ll have to keep the occasional table around for layout purposes.