Éste es el código CSS:
#divPag {
width: 770px;
margin-right: auto;
margin-left: auto;
height: 100%;
}
#divLogo {
height: 86px;
width: auto;
}
#divCuerpo {
background-repeat: repeat-y;
height: 100%;
width: auto;
background-image: url(../imagenes/fondo.gif);
}
#divCierre {
background-image: url(../imagenes/bordeInferior.gif);
background-repeat: no-repeat;
clear: both;
height: 23px;
width: auto;
margin-bottom: 20px;
}
#divMenu {
float: right;
height: auto;
width: 207px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
margin-right: 16px;
padding-right: 15px;
padding-left: 15px;
}
#divContenido {
height: auto;
width: 447px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
margin-left: 17px;
padding-right: 20px;
padding-left: 20px;
}
Éste es el código HTML:
<div id="divPag">
<!-- LOGO -->
<div id="divLogo"><img src="imagenes/logoTemporal.gif" /></div>
<!-- CONTENEDOR PARA CONTENIDO Y MENÚ -->
<div id="divCuerpo">
<div id="divMenu"></div>
<div id="divContenido"></div>
</div>
<!-- PIE DE LA PÁGINA -->
<div id="divCierre"></div>
</div>
En FIREFOX 2.0 se obtiene el resultado esperado, pero no ocurre lo mismo con Internet Explorer 6.0. Aquí #divMenu se desplaza hacia la izquierda y el contenido (#divContenido) hacia abajo. Podéis ver el resultado en mi página. Gracias.