Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/09/2005, 14:11
Josepo
 
Fecha de Ingreso: mayo-2005
Mensajes: 9
Antigüedad: 19 años, 6 meses
Puntos: 0
3 columnas, la del centro de anchura variable

Hola, estoy tratando de crear mediante CSS una página con 3 columnas, las laterales de 150px y la central que abarque TODO el espacio restante de la página, es decir, que la web ocupe todo el ancho de pantalla sea la resolución que sea.


Lo he conseguido para los navegadores serios (KHTML, Opera y Gecko), pero no funciona para IE.


Este es el CSS:

Código:
#col_izq
{
	float:left;
	width:150px;
	background-color: red;
}

#col_dcha
{
	float:right;
	width:150px;
	background-color: blue;
}

#col_central
{
	background-color: green;
	overflow:hidden;
}
Fijaros que el truco de que funcione está precisamente en la propiedad "overflow:hidden" de la columna central.


El html sería así:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Prueba Web 02</title>
	<link rel="stylesheet" type="text/css" href="css/prueba_web_02.css" />
</head>

<body>

	<div id="col_izq">
		Columna izquierda Columna izquierda
	</div>
	
	<div id="col_dcha">
		Columna derecha Columna derecha
	</div>

	<div id="col_central">
		Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central Columna central 
	</div>

</body>

</html>
Podéis comprobar que funciona bien en Firefox, Konqueror y Opera, pero el Internet Explorer pasa del atributo "overflow:hidden", y como la altura de las columnas laterales es menor que la central, el contenido de la central se expande cuando sobrepasa en altura a las columnas laterales, lo cual queda horrible.

Si alguien puede echarme una mano le estaría muy agradecido, pues es algo que llevo intentando hacer mucho tiempo, y es prácticamente lo único que no consigo con CSS.


Muchas gracias de antemano.