caja centrado con ancho fijo

xurxinho · #1 (**permalink**) 12/04/2009, 03:49

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&iacute;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).

jepsersk8 · #2 (**permalink**) 15/04/2009, 00:24

Prueba esto (no si te entendi bien, pero es asi como lo he hecho :p ):

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&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0; /*cero es cero, no importa que (em,px,%) :D */
	padding:0; 
	outline: 0;
}
/*borro el de html porque el * indica que todo sera con esas propiedades */
#contenedor{
	width:100%;
	height:100%;
}
#left{
	width:20%;
	height:100%;
	background-color:#000;
	float:left;
}
#right{
	width:20%;
	height:100%;
	background-color:#000;
	float:right;
}
#content{
	background-color:#cacaca;
        width:80%;
	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>

sin embargo si quieres que tu contenido este en el centro con puedes recorrir a dos cosas:

1. posicion absoluta
2. margin: 0 auto;

Pero para tu uso (y para que no te hagas bolas) creo que lo que te acaba de escribir resulve tu duda (ojala!)..

*Lo que hicimos aqui fue hacer que las columnas y todo tengan anchos relativos a la pantalla :)

Exitos!

xurxinho · #3 (**permalink**) 15/04/2009, 05:34

Esa parte está bien, el problema es que la parte central de la página se carga de forma dinámica, es decir hay una parte de administrativa desde donde se pone de forma dinámica el banner central, por tanto unas veces será más ancho y otras más estrecho, según cómo cargue el administrador el banner. Por tanto conozco el tamaño exacto de la zona central de la página, o sea que la caja central no tiene que ser siempre le 80%, puede ser de 800px o de 850px. Pues en función de esto se centre y los laterales se ajusten.
Por ahora lo que hago es poner únicamente una caja central en el body y centrarla.
Gracias de todas maneras

.