Estoy empezando la migración de mi web html a xhtm/css después del link recomendado en este foro
http://www.araudi.net/migracion/migr...sin_dolor.html, y voy a empezar a eliminar las tablas de diseño de la página.
He elaborado un código como este, simple:
Código HTML:
<!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" xml:lang="es" lang="es-es">
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px;
outline: 0;
}
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#contenedor{
width:100%;
height:100%;
}
#left{
width:140px;
height:100%;
background-color:#000;
float:left;
}
#right{
width:140px;
height:100%;
background-color:#000;
float:right;
}
#content{
background-color:#cacaca;
height:100%;
}
div.corte{
clear:both;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="left">
</div>
<div id="right">
</div>
<div id="content">
</div>
<div class="corte">
</div>
</div>
</body>
</html> El comportamiento es el más simple doy un tamaño a los contenedores laterales y los floto expandiéndose la caja central, simulando el efecto de página centrada, hasta aquí bien.
Mi pregunta es cómo puedo hacer lo contrario, es decir que sea la caja central la de tamaño fijo (mejor autoajustable) y en función de esto que sean los laterales los que se adapten de forma automática.
Tened en en cuenta que el ancho de la página (el bloque central) lo calculo a través de un banner que incluye el usuario en la parte superior de este bloque(#content).