Foros del Web » Creando para Internet » CSS »

3 columnas, la del centro de anchura variable

Estas en el tema de 3 columnas, la del centro de anchura variable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/09/2005, 15:11
 
Fecha de Ingreso: mayo-2005
Mensajes: 9
Antigüedad: 12 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.
  #2 (permalink)  
Antiguo 21/09/2005, 16:20
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
en vez del overflow hidden ponle un margin left y right del tamaño de las columnas que flotan
  #3 (permalink)  
Antiguo 21/09/2005, 16:34
 
Fecha de Ingreso: mayo-2005
Mensajes: 9
Antigüedad: 12 años, 6 meses
Puntos: 0
De acuerdo ¡¡¡ Siiii !!!

¡¡¡ 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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:22.