Maquetado CSS

Hola a todos.

Estoy empezando a maquetar en XHTML y CSS. La verdad que me encanta, y entiendo todos los beneficios, pero realmente no entiendo como IExplorer sigue siendo un estandar.... Como puede ser?

Estoy teniendo muchos problemas, y estuve navegando y leyendo muchos post en este y otros foros para detectar cuales son mis problemas. Algunos, los resolví con el amigo display:inline; otros con el text-size:1px;

Pero estoy intentando generar un diseño tal como lo indica la imagen y no puedo. Tengo problemas con los heigth...

Adjunto 3 imagenes y mi código HTML (con el CSS inline) la idea era poder hacerlo funcionar y luego meterlo en un archivo CSS aparte.

Las imagenes son: 1. El 'diseño' hecho con el photoshop, 2. Como se ve en explorer, 3. como se ve en firefox.

En resumen, ninguno de los 2 navegadores me lo muestra como yo quiero (se que hay algo que estoy haciendo mal, pero no se donde me equivoco). Con una tabla, creo que me ahorraría MUCHO problema, pero me niego a que me gane el CSS. Se que debe ser una cosa chiquita, pero no se en donde mirar.

Este es el codigo HTML:

<div id="site_wrapper" style="border:0px solid #000000;width:1000px; height:500px;">

<!-- BARRA SUPERIOR HORIZONTAL -->
<div id="horizontal_top_shadow" style="position:relative;float:left;width:100%; height:10px; font-size:1px;">

<div style="float:left; width:10px;height:10px;background-color:#f0f865;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#0006ce;font-size:1px;"></div>
<div style="float:left; width:96%;height:10px;background-color:#ff905a;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#0006ce;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#f0f865;font-size:1px;"></div>

</div>
<!-- BARRA SUPERIOR HORIZONTAL -->

<!-- PARTE CENTRAL -->
<div id="content_shadow_wrapper" style="position:relative;float:left;width:100%; height:500px;background-color:#99ffff;">

<!-- BARRA IZQUIERDA VERTICAL -->
<div id="vertical_left_shadow" style="position:relative;float:left;width:10px; height:100%;background-color:#9999cc;">

<div style="float:left; width:10px;height:10px;background-color:#ff0700;font-size:1px;"></div>
<div style="float:left; width:10px;height:100%;background-color:#ff5cff;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#ff0700;font-size:1px;"></div>

</div>
<!-- BARRA IZQUIERDA VERTICAL -->


<!-- CONTENIDO -->
<div id="content_wrapper" style="position:relative;float:left;width:97%; height:100%;background-color:#ebebeb;">
Aca va todo el contenido
</div>
<!-- CONTENIDO -->

<!-- BARRA DERECHA VERTICAL -->
<div id="vertical_right_shadow" style="position:relative;float:left;width:10px; height:100%;background-color:#ff0000;">

<div style="float:left; width:10px;height:10px;background-color:#0600d4;font-size:1px;"></div>
<div style="float:left; width:10px;height:100%;background-color:#9dd9d7;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#0600d4;font-size:1px;"></div>

</div>
<!-- BARRA DERECHA VERTICAL -->

<div style="clear:both;"></div>

</div>
<!-- PARTE CENTRAL -->

<!-- BARRA INFERIOR HORIZONTAL -->
<div id="horizontal_bottom_shadow" style="border:0px dashed #FF0000;position:relative;float:left;width:100%; height:10px; font-size:1px;">

<div style="float:left; width:10px;height:10px;background-color:#10914e;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#0600d4;font-size:1px;"></div>
<div style="float:left; width:96%;height:10px;background-color:#00f346;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#0600d4;font-size:1px;"></div>
<div style="float:left; width:10px;height:10px;background-color:#10914e;font-size:1px;"></div>

</div>
<!-- BARRA INFERIOR HORIZONTAL -->

</div>

Photoshop:


Como se ve en Explorer:


Como se ve en Firefox:

mmm lo que sucede aqui es que aun estas con el concepto de 'diseñar con tablas' en tu mente, estas tratando de replicar la estructura de una tabla, eso ya no se hace, debes pensar de otra manera, y olvidarte de como maquetabas con tablas antes, ahora es muy distinto.

La transicion para alguien que empieza con divs y estuvo mucho tiempo con las tablas es dificil, para empezar, la primera 'best practice' en css, invaluable, es usar un Reset CSS, de ahi lee manuales, lee el curso de cristalab de css y xhtml sobre todo la parte de maquetacion, para que puedas cambiar el concepto, y ve el codigo fuente de otras paginas en css pra que aprendas a usarlo de la manera correcta.

Y luego tu diseño no lo entiendo muy bien, eso que tienes en photoshop es lo que quieres hacer?

Muchas gracias por tu respuesta.
Si, es cierto, es muy TABLAS eso.
Lo del photoshop es porque es un diseño que en esas casillas de "colores" van unos PNGs chiquitos que simulan una sombra, tal como se ve aca en la interfaz de Cristalab.

Y como quiero que el alto sea dinámico (y en un principio tambien quería que sea dinámico el ancho, pero al final me di cuenta que eso no haría falta) y son distintos los tipos de sombras, no se me ocurría como hacerlo. Pero quizas me convenga hacer un div superior y otro inferior con los bordes completos, y el dinámico que sea el background del contenido y listo.

Pero voy a ver el sitio que me pasas. Muchisimas gracias!!!