Maquetado

[AWesker]

Amigos conocedores del arte CSS, necesito de su ayuda para realizar un maquetado que me ha complicado más de lo que esperaba.

La cuestión es esta: debo hacer un diseño (compatible con todos los navegadores o por lo menos ie7, ie8, mozilla, chrome y safari).
La complicación es que el diseño debe aparentar ser el clásico contenido encabezado-contenido-pie, pero el contenido debe ser independiente del encabezadoy el pie, pero los tres dentro de un wrapper central para que el contenido se centre automáticamente por cuestiones de presentación. Hice un pequeño modeo de como debería quedar:

El borde negro representa el wrapper central.

Aquí el código del Contenido (que es el más complicado para mi)

Código:

 
#SombraSuperior{
clear:both;
background-image:url(templates/Krome/images/shadowntop.png);
background-repeat:no-repeat;
background-position:left;
margin-left:-8px;
background-color:transparent;
height:24px;
width:962px;
}
#SombraIzquierda{
clear:both;
float:left;
z-index:2;
width:20px;
background-image:url(images/shadownleft.png);
background-position:left;
height:100%;/*200px*/
left:14px;
}
#Cuerpo{
position:absolute;
left:2px;
float:left;
width:942px;
height:100%;
/*background-color:#06C;*/
margin-top:-5px;
left:33px;
}
#SombraDerecha{
z-index:2;
float:left;
background-image:url(images/shadownright.png);
width:10px;
height:100%;/*200px*/
right:22px;
}
 

Código:

 
<div id="SombraSuperior"><!-- Inicio SombraSuperior -->
      </div><!-- Fin SombraSuperior -->  
      <div id="SombraIzquierda"><!-- Inicio SombraIzquierda -->
      </div><!-- Fin SombraIzquierda --> 
      <div id="Cuerpo"><!-- Inicio Cuerpo -->
      &nbsp;
      </div><!-- Fin Cuerpo --> 
      <div id="SombraDerecha"><!-- Inicio SombraDerecha -->
      &nbsp;
      </div><!-- Fin SombraDerecha --> 
 

pero de esta forma me queda así (solo las sombras superior, sombra izquierda, contenido y sombra derecha en escala):

Espero me puedan ayudar. Saludos...