divs con la misma altura

haron · #1 (**permalink**) 27/09/2005, 15:07

hola a todos.

tengo un pequeño problema. he creado dos divs contenidos ambos en un unico div, de manera que dividen la region en dos partes, una situada a la izquierda y otra a la derecha:

Código:

...
.div1 {
	border: 1px solid black;
}
...
<div class="div1" style="width: 450px; float: left; ">
<!-- area situada a la izquierda -->
	<div class="div1" style="float: left; width: 223px; ">
		Uno<br />
		Uno<br />
		Uno<br />
		Uno<br />
		Uno<br />
		Uno<br />
	</div>

<!-- area situada a la derecha -->
	<div class="div1" style="float: right; width: 223px; ">
		Dos<br />
		Dos<br />
		Dos<br />
	</div>
</div>

la cosa es que a veces, el "div" de la izquierda es mas alto que el de la derecha o viceversa.

he probado con "height: 100%", pero no funciona.

gracias a todos y en cuanto tenga un poco mas de habilidad con el CSS, no dudare en echaros una mano. por ahora sigo estando muy verde....

leoj90 · #2 (**permalink**) 28/09/2005, 13:51

Si tienes mas contenido en uno q en el otro es lógico q sea mas alto uno q el otro.

matius · #3 (**permalink**) 29/09/2005, 02:14

no es verdad, el hecho es que div solo tomará en cuenta el alto de la tipografia si no defines un valor para heigh

solucion usando id para alinear y class para border solo aplicado a la primera div o div "contenedor", el valor alto se define para las divs id "izquierda" y "derecha" (height:120px) pero no se usa en la principal pues el alto lo define el contenido, no el texto como aludio el compa.

esto funciona en ie, mozilla y opera

Cita:

el borde no lo apliques a los divs internos pues los deformas.
debes definir un valor para height y checar que si el contenido de uno lo sobrepasa definas otro tamaño igual a cada uno.

el valor lo puedes usar en cualquier tabla usando id en cada div y aplicando class al "contenedor" de ambas divs

haron · #4 (**permalink**) 29/09/2005, 07:48

gracias por la ayuda, matius.

K3NNY · #5 (**permalink**) 29/09/2005, 08:28

Me parece que lo que vos estas buscando se llama "Faux columns" o "columnas falsas". Si te manejas con el ingles te recomiendo que hagas una busqueda rapida en google que vas a encontrar varias soluciones a ese problema.

Suerte.

matius · #6 (**permalink**) 30/09/2005, 17:43

¿te parece k3nny?, quiza una explicacion mas detallada ayude.
la columna falsa es solo poner un fondo en una de las tablas
http://platea.cnice.mecd.es/~jmas/ma...scolumnas.html
gracias por el tip pero quizas, podrias aundar mas en el tema.

haron · #7 (**permalink**) 01/10/2005, 07:05

oh! thank you very much, indeed.

pellagofio · #8 (**permalink**) 01/10/2005, 13:50

Donde dices ...

Código HTML:

solucion usando id para alinear y class para border ...

¿Que diferencia existe entre id y class en CSS?
Que yo sepa los dos se usan para hacer mención a un elemento. La diferencia es que el nombre que le des al id unicamente se lo podras asignar aun solo elemento, mientras que el nombre class se lo puedes asignar a todos los elementos que quieras.

¿Por que lo has usado aquí de esta forma?

Gracias.

matius · #9 (**permalink**) 02/10/2005, 02:23

¿cuantos id puedes asignar a una misma etiqueta? 1 verdad?

en este caso solo use un class para no asignar la misma propiedad (o sea el borde a una tag css especifica" o sea la etiqueta "contenedor", usa id y class para darle dos propiedades al mismo tiempo una particular y otra grupal ejemplo:

<div id"individual" class="grupal"> esto usado en la misma etiqueta </div>

pero igual podriamos hacer el mismo id (recuerde que a los id se les asigna por la cota inicial "#" en cambio las class son "."

otra aplicación de la clas es "derecha.td" donde el derecha es cualquier nombre y td es la tag a la cual se le aplica o sea class grupal mientras que las id son particulares otros ejemplo mitabla.div o balazo.table, son divertidos modos de usarlos aunque siempre podemos hacer toda la distribución en css puro con el problema de que no es posible guardar las imagenes que se muestren por css

con el mismo id:

Cita:

/*contenedor de datos con borde en un mismo id */
#contenedor {width: border: 1px solid black; 500px; float:left;}