Bueno, quiero puntualizar una cosa:
- ¿Se puede hacer con xhtml+css (sin tablas) un layout que tenga primero una caja header de un tamaño determinado y luego otra caja seguida con el 100% del resto de la página?
SÍ, para todos los navegadores menos para IE6 y anteriores (que está por ver).
Esto ya estaba puesto en los anteriores ejemplos: hacer puramente el "layout" del que hablamos, con una caja de header y otra para el resto, colocada debajo y al 100% del resto es sencilíiiiiiisimo:
Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Simulacion tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
html, body { height: 100%;
width: 100%;
}
#header { height: 50px;
background-color: red;
line-height: 3em;
}
#resto { top: 50px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="header">Esta fila tendrá siempre 50px de alto</div>
<div id="resto"><br/>Esta fila ocupará el resto de alto</div>
</body>
</html>
Claro está, para Firefox, Opera, Camino, IE7, Safari, etc.
El problema es conseguir esto para el estupido IE6 y anteriores, pero sinceramente, empiezo a estar hasta las narices de adaptar todo en especial para un navegador que no respeta los estándares ni las recomendaciones universales.
- ¿Se puede conseguir con xhtm+css (sin tablas) el mismo efecto visual, manteniendo una caja header y otra caja con el resto del contenido que ocupe el 100% del resto de la página?
SÍ
Quizá esto sea más exacto con respecto a tu consulta.
Mikel.
P.D.: David24, mira la cantidad de código y dime si es más "caro" o más "económico" que con tablas.