Foros del Web » Creando para Internet » CSS »

Columnas con misma altura

Estas en el tema de Columnas con misma altura en el foro de CSS en Foros del Web. Hola buenas, Tengo una página principal que tienes 4 divs principales: Cabecera, debajo 2 columnas, (izquierda para menu y derecha para contenidos) y un pie. ...
  #1 (permalink)  
Antiguo 30/01/2008, 04:07
 
Fecha de Ingreso: septiembre-2007
Mensajes: 106
Antigüedad: 10 años, 3 meses
Puntos: 1
Columnas con misma altura

Hola buenas,

Tengo una página principal que tienes 4 divs principales:

Cabecera, debajo 2 columnas, (izquierda para menu y derecha para contenidos) y un pie.

¿Cómo puedo hacer para que al extenderse el contenido del div dela derecha la columna izquierda crezca a la misma altura que la de la derecha?

Gracias

Última edición por suudobal; 30/01/2008 a las 09:08
  #2 (permalink)  
Antiguo 30/01/2008, 06:06
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Columnas con misma altura

simplemente ponles heigh: auto
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 30/01/2008, 09:05
 
Fecha de Ingreso: septiembre-2007
Mensajes: 106
Antigüedad: 10 años, 3 meses
Puntos: 1
Busqueda Re: Columnas con misma altura

No funciona con height: auto.

A ver mi estructura es la siguiente:
Código HTML:
<div align="center">
	<div id="principal">
		<div id="cabecera">Espacio para la cabecera</div>
        	<div id="izq">Espacio para el menu</div>        
		<div id="centro">        
        		<div id="texto">Espacio para contenido</div>	
        	</div>	
		<div id="pie">Espacio para el pie</div>
	</div>
</div> 
Y el CSS:

Código HTML:
#principal {
	width:875px;
	text-align:center;
}
#cabecera{
	width:875px;
} 
#izq{
	width:213px;
	float:left;
	background-image:url(/imgs/fonMenu.gif)
}
#centro{
	width:662px;
	background-color:#FFFFFF;
	float:left;
}
#pie{
	width:875px;
	clear:both;
}
Si pongo el height: auto en #izq no me alarga la columna a lo alto...

¿Alguna solución?
  #4 (permalink)  
Antiguo 30/01/2008, 09:20
 
Fecha de Ingreso: enero-2008
Mensajes: 52
Antigüedad: 9 años, 10 meses
Puntos: 2
Mensaje Re: Columnas con misma altura

Hola yo tuve el mismo problema hace tiempo y encontre esta solución:

Haces un div que cubra las columnas:
Código:
        <div id="container">
        	<div id="izq">Espacio para el menu</div>        
			<div id="centro">        
        		<div id="texto">Espacio para contenido<br />mucho contenidp</div>	
        	</div>	
        </div>
Y la css la modificas y añades esto a los diferentes divs:

El contenedor:
Código:
#container{
	overflow:hidden;
}
Cada columa:
Código:
#izq{
	width:213px;
	float:left;
	background-image:url(/imgs/fonMenu.gif);
	padding-bottom:30000px;
	margin-bottom:-30000px;
}
#centro{
	width:660px;
	background-color:#FFFFFF;
	float:left;
	padding-bottom:30000px;
	margin-bottom:-30000px;
}
Lo considero una chapuza pero funciona
  #5 (permalink)  
Antiguo 30/01/2008, 15:10
 
Fecha de Ingreso: septiembre-2007
Mensajes: 106
Antigüedad: 10 años, 3 meses
Puntos: 1
Re: Columnas con misma altura

Para ser una "chapuza" como dices funciona bastante bien, jeje. Si nadie da más, es lo mejor que tengo

Saludos
  #6 (permalink)  
Antiguo 07/03/2008, 14:03
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Columnas con misma altura

En realidad hay muchas formas de hacerlo (o mejor, de simularlo). La más evidente -claro- es la de usar 2 celdas en una misma fila; pero en el Foro y en otros sitios vas a encontrar más. Aquí te dejo un enlace con javascript.

acerca de dos div

La ventaja de este código es que no simula nada, lo hace. y no es necesario agregarle fondos, ni marginación, ni usar hacks para que sea compatible, ni tablas (HTML o CSS), ni meter una columna dentro de la otra (lo que destruye las jerarquías del documento).

Sí, por supuesto, hay que tener JS habilitado.

Algunos otros temas relacionados son

Poner dos divs al mismo nivel sin position:absolute

Posicionando DIV's ...

Listas de lado
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 08:04.