3 columnas, la del centro de anchura variable

Josepo · #1 (**permalink**) 21/09/2005, 14:11

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.

RoQ · #2 (**permalink**) 21/09/2005, 15:20

en vez del overflow hidden ponle un margin left y right del tamaño de las columnas que flotan

Josepo · #3 (**permalink**) 21/09/2005, 15:34

¡¡¡ Efectivamente !!!
Muchas gracias, de verdad.
Qué fácil parece una vez de que te lo dicen, pero te aseguro que me había estado comiendo al cabeza con este problema mucho tiempo.

De nuevo muchas gracias.