Trabajar sin tablas permite dibujar la estructura muy rápidamente:
<div id="cabecera"> </div> <div id="otra-cabecera"> </div> <div id="columna-izquierda"> </div> <div id="columna-derecha"> <div id="anidado"> </div> </div> <div id="centro"> </div> <div id="pie"> </div>
Puede uno olvidarse de dar formato y posición al contenido, de eso nos ocuparemos luego con la hoja de estilo.
Ancho fijo de 750 píxels y margenes en auto para centrar. Puedes ver la CSS pinchando con el botón derecho>>Ver código fuente en cualquier momento.
Puedes añadir tantas cabeceras con los mismos valores como necesites para menús, logo, fecha...
Puedes ahorrar codigo encerrando todo en un div, y ajustando el ancho y los margenes para centrar sólo ese. Así es como está hecho aquí.
Esta columna tiene un ancho de 220 píxels. 200 píxels de ancho más los 20 de padding.
Está flotando a la izquierda.
Esta columna tiene un ancho de 270 píxels y está flotando a la derecha.
No hay ningún problema en anidar nuevos bloques en cualquier columna
Esta columna debe estar ajustada a la columna de la izquierda, y tener también un ancho fijo, lo que quede después de descontar el ancho de las columnas laterales. Cuidado al calcular, debido al modelo de caja extraño de Internet Explorer, tendrás que adelgazar un poco esta columna, para que todo encaje.
El pie puede ocupar el 100% del ancho del div contenedor. No tiene importancia cual de las columnas sea más larga.
Este modelo ha sido probado en las últimas versiones de Internet Explorer, Opera y Mozilla Firebird; puedes verlo trabajando en navegaseguro.cjb.net.