For the past 3 years or so, there has been a shift in the web design field away from table based layouts toward the nirvana of standards-based, xhtml compliant, CSS driven layout. It is often a frustrating topic for those that have used tables for layout (pretty much every designer/developer I know). So most, despite noble intentions, end up doing a hybrid design (tables & CSS) or simply abandon CSS layout all together using CSS solely for formatting.
Well, times are changing and this task is getting slightly easier. With the new browsers (e.g. Firefox 1.x – get it and use it!), there are far less cross browser issues though some still exist. Here are some resources that I hope you find helpful:
- Tips on CSS Layout (thanks Jason!)
- Simple columned layouts by Lissa Ten more CSS tricks you may not know
Also,) a side note on Firefox. It has a couple phenomenal extensions to help in this area:
- The Web Developer Toolbar is invaluable. Just install it.
- Aardvark lets you alter a web page on the fly, view partial source, delete elements for printing, and many more goodies.
- IE Tab lets you open up IE within a tab in Firefox and see how the page will render without ever opening IE.
Hopefully you can start using CSS layout s in your app. The power is amazing. One thing that forced me to do this on a recent project was the print-friendly requirement. I wanted to hide both the header and menu areas when printing. With tables, I was stuck, but transitioning to a CSS based layout, it now works like a charm.