How this layout can work for multiple screen resolutions?

Hi.
Basically I want the middle of the design (http://i51.tinypic.com/2iuudzm.jpg) (what's in between the red lines) to be seen by viewers with 1024x768 screen resolution, and have the parts outside of the red lines to still appear in browsers with higher screen resolution. Is it possible to segregate divs to organise this without comproising the design?
This is the site: http://raws.adc.rmit.edu.au/~s3238684/index.htm
I tried just center-aligning the main content and make those side panels as the page background (http://raws.adc.rmit.edu.au/~s3238684/default.htm), but then the layout only works on 1024x768 or my screen resolution (1366x768 - and still, that's only if the browser fully maximised)
Would appreciate if somebody could help out anyway!

It sounds like you just need a container div.

Just have a container div, that hold all your content in the middle section.

Then on this div, set a width of say 1024px.

Then to centre that div, just add: margin: 0 auto;

Cheers.

Yes I can get the middle section to appear in the middle, but then I can't have the extra sides (the sides that dont appear in 1024x768) stay next to that div and still appear in the middle of the browser.. :S

Your background must be set on an element which stretches 100% of the page. Within that element, you have another container which is set to the width you wish and centered. This partially alleviates the problem. However, there will always be screens with high resolutions. The only way you can solve this is by making the background seamless (i.e. there is a part which can be repeated forever on either side without it looking bad) or by ending the background somehow (like a page metaphor with a drop-shadow or something.)