What is best solution to get cross browser layout like this (Without Javascript), drop shadow on left and right and flexible in Height?

I'm looking to do something like this:

a blue background, with a white center, with drop-shadows to the left and right http://shu开发者_如何学JAVAp.com/Shup/368761/110521213922-My-Desktop.png

Needs to be light-weight and compatible with IE6.

You need to do it all in Photoshop. Create the dropshadow with a distance of "0". Then save the white background with the drop shadow as a PNG with a transparent background. The shadow will fade into whatever body background you have. This is what we have done with our website

http://infinitas.ws

EDIT:
I missed the IE part

I suppose a different option could be that you use the (blue gradient) within the background image and save it as a JPEG. This means that your #Main-Wrapper width will be the width of the entire white background PLUS the dropshadow AND some of the blue-to-white gradient. This is going to be challenging in CSS because you cannot repeat it vertically due to the blue-to-white gradient background.

EDIT EDIT:
Further you can use an IE hack to show a background WITHOUT a drop shadow to anyone using IE6 and then use the Transparent PNG for everyone else who is using a browser worth using.

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Making it in Gimp or Photoshop.

To add to the "make it in photoshop" answer, an alternative solution would be to use an IE PNG "fix". This makes translucent or transparent PNGs actually work somewhat in IE6. It's not perfect, but testing may show that it suits your needs.

http://www.twinhelix.com/css/iepngfix/