Columnas con misma altura

[suudobal]

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

[hades87]

simplemente ponles heigh: auto

[suudobal]

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?

[seiferdrg]

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

[suudobal]

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

Saludos

[furoya]

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