Measure the inside width of each background - I recommend using MeasureIt (Firefox only addon). Now make a separate CSS file for each resolution and use the measured inside width as the "PageWrapper" width... the css only needs the size of the wrapper and left & right content zones... Make sure the width is followed by an "!important".

I left these as separate CSS files in case you want to use different box borders for smaller sizes. Here is what each file looks like:

Upload these CSS files to your site through the file manager.

*Note: "max-width" in the CSS does not work with IE6, so read the comments below as to the additional variables required to make it work.

If you are considering adding css for smaller screens, like an iphone, then you can make more files... in the example below I started with the sizeSelected variable at "blue-320.css" and the first (pageWidth > 510) line, like this:

In the example above, max-width is set to 825px and width at the end is set to that as well. Also, these three variables must stay in their present order.

Edit (3/12/2009): Added the extra CSS required to make the max-width variable work with IE. Edit (9/25/2009): Added comment about using MeasureIt addon for Firefox Edit (12/21/2009): Updated code to automatically adjust while resizing the browser window.

If your tooltips are not working or only show gibberish (raw HTML) then you are most likely missing the updated tooltip script. Add the following to your Footer Area (Control Panel > Custom HTML & Scripts > Footer Area)