Foros del Web » Creando para Internet » CSS »

divs con la misma altura

Estas en el tema de divs con la misma altura en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/09/2005, 16:07
Avatar de haron  
Fecha de Ingreso: febrero-2004
Ubicación: Cádiz (refinitivo)
Mensajes: 632
Antigüedad: 13 años, 9 meses
Puntos: 3
divs con la misma altura

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....
__________________
Si ocurre algo importante, estamos afuera fumándonos unos cigarritos.
  #2 (permalink)  
Antiguo 28/09/2005, 14:51
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.365
Antigüedad: 12 años, 4 meses
Puntos: 0
Si tienes mas contenido en uno q en el otro es lógico q sea mas alto uno q el otro.

Última edición por KarlanKas; 29/09/2005 a las 09:36 Razón: tono demasiado agresivo
  #3 (permalink)  
Antiguo 29/09/2005, 03:14
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
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:
<style>

/* div1 de borde, aplicalo como class="div1" en el div contenedor */

.div1 {
border: 1px solid black;

}

/*contenedor de datos con borde por class="div1" */

#contenedor {width:500px; float:left;}

/* div zquierdo alto a 120 pxs */

#izquierda {float:left; background-color:#0000FF ; width:250px; height:120px ; top: inherit;}

/* div derecho alto a 120 pxs */

#derecha {width:250px; height:120px ; float:left; background-color:#993300;}


</style>

<body>
<!-- contenido separado de css por id y class-->
<div class="div1" id="contenedor">
<!-- contenido separado de css por id="izquierda"-->
<div id="izquierda">
Uno<br />
Uno<br />
Uno<br />
Uno<br />
Uno<br />
Uno<br />
</div>
<!-- contenido separado de css por id="derecha"-->

<div id="derecha">
Dos<br />
Dos<br />
Dos
</div>

</div>
</body>
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

Última edición por matius; 29/09/2005 a las 03:28
  #4 (permalink)  
Antiguo 29/09/2005, 08:48
Avatar de haron  
Fecha de Ingreso: febrero-2004
Ubicación: Cádiz (refinitivo)
Mensajes: 632
Antigüedad: 13 años, 9 meses
Puntos: 3
gracias por la ayuda, matius.
__________________
Si ocurre algo importante, estamos afuera fumándonos unos cigarritos.
  #5 (permalink)  
Antiguo 29/09/2005, 09:28
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
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.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #6 (permalink)  
Antiguo 30/09/2005, 18:43
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
¿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.
  #7 (permalink)  
Antiguo 01/10/2005, 08:05
Avatar de haron  
Fecha de Ingreso: febrero-2004
Ubicación: Cádiz (refinitivo)
Mensajes: 632
Antigüedad: 13 años, 9 meses
Puntos: 3
oh! thank you very much, indeed.
__________________
Si ocurre algo importante, estamos afuera fumándonos unos cigarritos.
  #8 (permalink)  
Antiguo 01/10/2005, 14:50
 
Fecha de Ingreso: noviembre-2003
Mensajes: 383
Antigüedad: 14 años
Puntos: 2
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.
  #9 (permalink)  
Antiguo 02/10/2005, 03:23
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
¿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;}

Última edición por matius; 02/10/2005 a las 03:30
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 16:24.