Buenas. Veamos, tengo un problema con la maquetación de un sitio usando CSS y agradecería a cualquier interesado en ayudarme.
La cosa es que el contenido de un sitio está diseñado a la antigua usanza, usando tablas que lo enmarcan todo con WIDTH=100%. Eso no lo puedo cambiar, porque entre otras cosas hay unos foros phpBB de por medio, y si me meto dentro puedo salir mal...
Estoy rediseñando el sitio, que tiene una estructura básica: una cabecera que ocupa todo el ancho, unos menús a la izquierda con anchura fija y el contenido a la derecha de los menús, y abajo del todo un pie de página (ver gráfico más abajo). Así que lo que quiero hacer es rediseñar la cabecera, menús y pie de página para pasar de maquetación con tablas a maquetación con div, pero dejando intacto el contenido.
El código viene a ser básicamente esto:
<div id="todo">
<div id="cabecera">CABECERA</div>
<div id="menus">MENUS</div>
<div id="texto">CONTENIDO</div>
<div id="pie">PIE DE PAGINA</div>
</div>
Resumiendo, el CSS es así:
#todo {
width: 100%;
min-width: 750px; (dichoso IE...)
}
#cabecera {
width: 100%;
height: 50px;
(fondo y colores)
}
#menus {
float: left;
width: 150px;
}
#texto {
padding-left: 175px; (dejo un margen)
margin: 0px;
}
#pie {
width: 100%;
height: 50px;
clear: both;
}
Bueno, aclarar que los menús tienen anchura fija, pero varían en altura, porque son menús en cascada.
Pues bien, con contenidos "normales", todo cuadra, todo está en su sitio. Pero en el momento en que dentro del div "texto" hay un contenido enmarcado con una tabla de width=100%, EL INTERNET EXPLORER ignora el padding que tiene este div "texto" para "saltarse" los menus flotantes (float left) y tiende a ocupar todo el ancho de la pantalla el contenido. Pero, evidentemente, los menús están ahí, y entonces me sitúa el contenido a partir del fin de los menús y ocupando el ancho de la pantalla.
Curiosamente, en FireFox todo se ve a la perfección. Para más claridad de lo que hablo, he hecho un pequeño gráfico orientativo (ignorar los márgenes y tamaños, sólo es para hacerse una idea de la distribución):
h tt p:/ /img183.imag eshack.us/my.php?image=diagramalp5.png
He probado con diferentes asociaciones de divs, posicionando los elementos de forma absoluta y relativa y un montón de cosas que ya no recuerdo y no funciona la cosa en ambos navegadores. Si, por ejemplo, pongo float: right; en el div del "texto", funciona pero el contenido sin tablas aparece a la derecha. Si incluyo en el fichero de estilo esto:
table {
width: auto;
}
Las tablas con ancho 100% se ven bien, pero las que no se quedan en lo mínimo.
Es decir, lo que quiero es meter en el div "texto" el contenido igual que si se viera en el resto de la pantalla. Y hay que decir que maquetando con tablas la cosa funciona..
Insisto en que las tablas del cotenido no las puedo quitar, así que el contenido puede (o no) tener una o más tablas con width=100%.
Gracias de antemano.
