Estube mirando tu css y es lógico que no te funcione:
1.- El body no necesita un margin:0 auto, ya que quieres que dos de tus franjas ocupen todo el ancho.
2.- No es necesario un contenedor principal y menos con ese ancho monumental que estas utilizando, además el ancho lo estas declarando 2 veces en el mismo id, como te digo para esta estructura no es necesario y si lo llegaras a utilizar para que no haya problemas de scroll horizontal solo es necesario un ancho de 100%.
3.- Para hacer una declaración de alto mínimo y que funcione en IE6 también es necesario este orden con la palabra !important
Código:
min-height:300px; height:auto!important; height:300px;
4.- Las propiedades margin y padding se pueden hacer en una solo línea, por ejemplo en el encabezado tienes 2 padding que deberían ir así:
y lo mismo pasa con la propiedad background:
Código:
background:url(elementos/menu-recuadro.jpg) no-repeat;
5.- En la
estructura principal no necesitas elementos flotantes, como vez en el ejemplo que te he puesto en mi anterior post, y cuando los utilizes tienes que limpiarlos ya que estos se salen del flujo del HTML haciendo que las cosas alrededor de el se descoloquen.
No me lo tomes a mal, son solo unos consejos para que te des cuenta de que es lo que va yendo mal en tu maquetación, la estructura que te pase es como entendí tu problema y creo que lo sigo entendiendo de la misma forma, así que te sugiero usar la maqueta que te pase e ir metiendo tus cosas ahí para que te vayas dando cuenta de como va quedando.
Aquí hay una explicación de como utilizar elementos flotantes.
Si tenes tiempo le echo una mirada más a fondo que ahora ando ocupado.