Best way to code for different browser resolutions?

[eluser]boltsabre[/eluser]
According to the W3 schools browser display statistics (found here: http://www.w3schools.com/browsers/browsers_display.asp), 14% have screens of 1024 X 768 pixels, 85% of people have something larger, and 1% of people have something smaller (but this does not take into consideration the march of the smart phones into peoples browsing habits, but that's another story, and you should be detecting the user agent to handle this anyway).

So basically, I build for the screen resolution of 1024 X 768 pixels, if they have something smaller, that's their fault, anyway, that's what the bottom left-to-right scroll bar in your browser is for.

If you want to get right into it, you can use JS to detect their browser size and then use it to dynamically load an appropriate CSS style sheet, but I just use JS to center my website in the middle of the users screen - your choice!!!

I wouldn't get too bogged down into it all, just build for the majority (in this case 1024 X 768 pixels). And test it on these browsers, and all should be good for 97% of your users (depending on your target countries, but again, that is another story and involves more research): Firefox 3 and 4, Chrome, Opera, Safari and IE 7, 8 and 9.

Oh, on a side note, if you are doing a project for a company in your first 'research' phase you should find out what is the standard size monitor they use within their organsiation, you may have to build for something smaller than 1024 X 768 pixels. Get this sorted out in your 'Requirements' contract and you'll be safe! This is especially true if you are building for an Intranet.