¿Cómo hacer que dos div crezcan igual?

[danico90]

Buenas,

La duda que tengo es la siguiente:

Tengo 3 divs: container, menu_izq, texto.

Container es el contenedor de menu_izq y texto; menu_izq y texto van juntos. Lo que quiero hacer es que si se le mete mucho texto al div llamado texto el height de menu_izq también aumente y los 2 queden del mismo tamaño.

¿Cómo es posible hacer esto?

Gracias.

Dejo el codigo del css:

Código:

.container {
	overflow:auto;
	height:auto;
}

.menu_izq {
	float:left;
	padding-left:20px;
	list-style:none;
	font-weight:bold;
	color:#FFF;
	margin-top:10px;
	width:180px;
	background:url(dg.jpg);
	height:auto;
}

.texto {
	margin-top:10px;
	float:right;
	background-color:#FFF;
	width:790px;
	padding:0px;
	text-align:justify;
	height:auto;
}

[gioramies]

Hola. La verdad no se me ocurre que se pueda hacer algo al respecto utilizando CSS, al menos que haya alguna técnica por allí ó algún hack que se ajuste a lo que deseas. Lo que si estoy seguro es que se puede hacer con javascript: capturas la altura del div llamado texto y se la asignas a los demás div que desees, así todos tendrán la misma altura.

Espero que eso te sirva, si es lo que deseas, avisa para seguir ayudándote, o también puedes esperar otras respuestas para ver si son más fáciles y/o ligeras, tampoco puede asegurarte que tengo la posesión de la verdad absoluta Saludos.

[opzina]

Hola. Pueba poniendo a .text y .menu_izqu. Un min-height:xxxpx; height:auto; y overflow:hidden;

Saludos.

y al overflow de .container tambien ponle overflow: hidden;

[denica001]

1) Al selector "container" ponele la propiedad relative
2) Elimina los heigh de cada uno de los dos restanes divs
3) Defini un selector descendiente del tipo

#contanier br.clear {
display:block
clear: both
}

4) Cuando termines de escrbir el texto agrega un br al final.
5) Asignale la clase clear

Y Listo con eso tendrias lo que queres. Siempre que agrandas el texto se va adapatar el tamaño del div de l menu horizontal.

Probalo y si te llega a funcionar contame.

Saludos.

[kseso?]

Las palabras mágicas son "columnas equilibradas".
Y discrepando de Gioramies, aquí tienes una estructura ya montada, autor: Mikmoro.
http://www.araudi.net/ejemplos/colum...ilibradas.html

Espero puedas adaptarla a tus necesidades.

Un saludo.
P.D.: Si son más columnas de 2, también hay estructuras ya realizadas, sólo es cuestión de una jaculatoria a google

[gioramies]

Maravilloso.

[jalex16]

podrías simular tablas con DIVs también con la propiedad display: table
ahí en araudi también me parece haber visto ese método

[kseso?]

Iniciado por jalex16

podrías simular tablas con DIVs también con la propiedad display: table
ahí en araudi también me parece haber visto ese método

El problema está en que no todos los navegadores entienden el "display: table || table-row || table-cell"

[jomaruro]

Hola:

Iniciado por gioramies

Lo que si estoy seguro es que se puede hacer con javascript...

¿Y si el usuario tiene desactivado javascript?

Saludos.

[gioramies]

¿Joramuro podrías leer de nuevo?

Iniciado por gioramies

Hola. La verdad no se me ocurre que se pueda hacer algo al respecto utilizando CSS, al menos que haya alguna técnica por allí ó algún hack que se ajuste a lo que deseas. Lo que si estoy seguro es que se puede hacer con javascript: capturas la altura del div llamado texto y se la asignas a los demás div que desees, así todos tendrán la misma altura.

Espero que eso te sirva, si es lo que deseas, avisa para seguir ayudándote, o también puedes esperar otras respuestas para ver si son más fáciles y/o ligeras, tampoco puede asegurarte que tengo la posesión de la verdad absoluta Saludos.

Si el cliente tiene javascript desactivado existe la etiqueta <noscript>.

[jomaruro]

Hola:

Iniciado por gioramies

Si el cliente tiene javascript desactivado existe la etiqueta <noscript>.

Y ¿qué me quieres decir con eso?

Saludos.

[danico90]

Gracias a todos por la ayuda, el ejemplo que tome como referencia fue el de kseso? pero no lo entendi, podrias decirme que es lo que hace que los dos div crezcan igual es q estuve tratando y no me sale...

Dejo el codigo para que lo revisen:

Código:

.container1 {
	width:850px;
	margin:20px auto;
	overflow:auto;	
}

.container2 {
	width:500px;
	float:right;	
}

.menu_izq {	
	width:280px;
	float:left;
	padding-left:20px;
	font-weight:bold;
	background:url(dg.jpg);
	position:relative;
	margin-left:-350px;
}

.texto {	
	width:450px;
	float:left;
	padding:20px;
	background-color:#FFF;
}

Gracias.

[Mikmoro]

Puedes leer una explicación en este tema de las FAQ de CSS. Verás abajo el enlace a un zip. En él hay un documento que explica el cómo y el por qué.