It's a simple solution for a not so simple reason.
Your problem was caused by electing to use 'layers' for the left hand
elements and centering for the images. This is a fatal decision for one not
skilled in web work since it means that part of your page will move (the
images), and part of your page will not (the layers).
There are two solutions to this problem -
1. To get rid of the layers, and use only tables for everything. That way,
all of your content is within a center table (or tables), and it all moves
in concert.
2. To use a knowledge of how absolute positioning works, and change the
frame of reference of those layers from the top left of the page to the top
left of a 'parent' centering container.
We did the latter. The concept is this -
1. Use CSS to define centering properties on the container (the div with
the id of 'wrapper') - to make it center, we had to give it a width, and
specify 'auto' margins left and right. Since we know the width of the
browser viewport, and we know the width of the container, we can calculate
how much margin to use on the left and on the right and that's what the
browser does.
2. Use CSS to position that div in such a way that it becomes the parent
positioned element for the 'layers' that you have used on the page. Since
that element is now a centering element, when it centers, it drags the
'child' layers along with it (as well as the table). To do this, all you
need to do is to make the container div ('wrapper') have
"position:relative".
3. Add the opening tag for the container div immediately below <body>, and
the closing tag for the container immediately above </body>, so that the
entire page is contained within it.
4. Add some tricks to kick IE in the pants and remind it that it should
center align things - that's the text-align:center part of the CSS. Then
add another trick to revert the alignment back to what you wanted in the
first place (that's the text-align:left part).
Did I lose you?
