What are some best practices on enabling a web application to support multiple resolutions? Specifically resolutions that are wide-screen vs. normal aspect ratio.
It doesn't seem like there is an easy answer - other than simply supporting a few fixed resolutions and using some absolute positioning to get the layout to work correctly.
This of course gets even more difficult to make it cross browser.
Does anyone have any good resources of this problem?
You have two options here:
Both have benefits and drawbacks, and in the end, it's a design decision as to which is the best choice.
One fast, simple, fairly robust way is to use a framework like Blueprint or 960gs to lay out the site. They're browser-independent so you don't need to worry about that, and they make most column layouts pretty easy.
They both work on the idea of creating a fixed-size container somewhere between 900 and 1000 pixels wide for your content. Most people run in at least 1024x768 nowadays. If you need more width than that for your content, you're probably doing it wrong.
The one area where ~960px might not work is mobile phones... but that's what mobile stylesheets are for, right?
You can always try to use a liquid layout structure where the width of your elements are scaled proportionate to how wide their browser window is.
here is a good article explaining different layouts including liquid layout.
http://www.maxdesign.com.au/presentation/liquid/
PS. the above mentioned site (maxdesign.com.au) is using liquid layout itself, so try and change the size of your browser when reading the article.
In Opera and Safari (esp. their mobile versions) you can use CSS3 media queries, which let you declare completely different styles for different screen resolutions.
This can be emulated in other browsers using Javascript – Alistapart: Switchy McLayout