Estoy maquetando con XHTML y CSS y tengo un problemilla. La página que estoy diseñando tiene la siguiente estructura principal.
<body>
<div id="caja">
<!--Inicio Cabecera-->
<div id="cabecera">
</div>
<!--Fin Cabecera-->
<!--Inicio Cuerpo-->
<div id="cuerpo">
<!--Inicio Columna-->
<div id="columna">
</div>
<!--Fin Columna-->
<!--Inicio Contenido-->
<div id="contenido">
</div>
<!--Fin Contenido-->
</div>
<!--Fin Cuerpo-->
<!--Inicio Pie-->
<div id="pie">
</div>
<!--Fin Pie-->
</div>
</body>
Podéis ver el esquema de este código XHTML en la siguiente dirección.
http://www.oscarsotorrio.com/temp/estruc.html
El código CSS correspondiente a la estructura es el siguiente:
body {margin:0; padding:0}
#caja {width: auto;
margin: 5px;
padding: 5px;}
#cabecera {width: auto;
margin: 5px;
padding: 10px}
#cuerpo {width: auto;
margin: 5px;
padding: 10px 0px 10px 0px}
#columna {width: 20%;
float: left}
#contenido {width: auto}
#pie {width: auto;
margin: 5px;
padding: 5px;
clear: left}
El problema es que cuando se reduce el ancho de la ventana del navegador el elemento “contenido” y “columna” se mezclan y se superponen. Es decir, que en ningún momento sale en el navegador la barra de desplazamiento horizontal.
He probado con la propiedad ‘overflow: scroll’ tanto en ‘body’ como ‘caja’. ¿Podéis ayudarme?.
Muchas gracias por adelantado.
Un saludo.
Oscar S.S.
