Foros del Web » Creando para Internet » CSS »

Hacer que los borders tengan el mismo alto

Estas en el tema de Hacer que los borders tengan el mismo alto en el foro de CSS en Foros del Web. Buenas... tengo una consulta sobre como hacer que los borders de varios divs tengan el alto del div con mayor contenido.... la cosa es asi... ...
  #1 (permalink)  
Antiguo 25/01/2009, 13:28
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Pregunta Hacer que los borders tengan el mismo alto

Buenas... tengo una consulta sobre como hacer que los borders de varios divs tengan el alto del div con mayor contenido....

la cosa es asi... tengo un div que contiene a cuatro divs... donde habra distinta informacion.

Para separarlos, utilizo el CSS border-rigth, por lo que el ultimo cuadrado es especial, ya que no tiene border right. Ahora, lo que intento hacer es que el div que sea mas alto, "arrastre" a todos los otros divs, cosa de que la el border separador sea del mismo alto para todos.. se entiende?

esta es la parte del codigo HTML:

Código:
<div id="lomas">
				<h1><strong>lo+</strong>reciente</h1>
				<div id="cuadrado" name="proyectos"><h3>Proyectos</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris et dolor. Sed at turpis vitae velit euismod aliquet. Aenean id purus.</div>
				<div id="cuadrado" name="enlaces"><h3>Enlaces</h3><img src="http://open.thumbshots.org/image.aspx?url=www.leloir.org.ar" border="1" /><br/>Leloir</div>
				<div id="cuadrado" name="articulos"><h3>Articulos</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris et dolor. Sed at turpis vitae velit euismod aliquet. Aenean id purus.</div>
				<div id="cuadradoult" name="teoricos"><h3>Teoricos</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris et dolor. Sed at turpis vitae velit euismod aliquet. Aenean id purus.</div>
			</div>
Y el codigo CSS:

Código:
div#lomas {
	font-family: "Lucida Grande", "Verdana", sans-serif;
	font-size: 12px;
	color: #000;
	background:#FFB39F;
	padding:5px;
	text-align:center;
	margin-top:15px;
	display: block;
	overflow: auto;
	-moz-border-radius:5px; /* solo para firefox, CSS3 */
	}
h2 { font-family:"Evolution", "Verdana", sans-serif; text-align:right; font-size: 25px; color: #000; padding:0 0 10px 0;}
div#cuadrado { width:168px; float:left; border-right: solid 2px #FFF; text-align:justify; padding:5px}
div#cuadradoult {width:168px; float:left; text-align:justify; padding:5px}
h3 {font-family: "Lucida Grande", "Verdana", sans-serif; font-weight:bold;
	font-size: 14px;
	color: #000; }
Espero puedan ayudarme, desde ya muchas gracias!

Un saludo, !

Pablo.

pd: por las dudas, la direccion de la pagina es http://www.proyectoshuerto.com.ar/nuevaimagen/index.php
  #2 (permalink)  
Antiguo 25/01/2009, 14:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Hacer que los borders tengan el mismo alto

Dos formas de hacerlo (o dos páginas donde encontrarás cómo):

www.araudi.net
http://matthewjamestaylor.com/

Pero eso te va a suponer reestructurar tu modelo de cajas contenedoras. No es sólo añadir una o dos propiedades a las que tienes.

Bueno, mírate cómo lo realizan y después de intentarlo, si tienes dudas, por aquí andaremos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 26/01/2009, 09:52
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Hacer que los borders tengan el mismo alto

no logro entender el codigo entero, por lo que decidi quitar los borders....

de todas formas, y como dijiste, no podrias explicar de que forma funciona para ver si lo comprendo mejor?? porque el que esta en ingles da muchas vueltas, y el de araudi no da explicaciones, solo el codigo, ,salvo que no lo haya encontrado!

muchas gracias, un saludo!

pablo
  #4 (permalink)  
Antiguo 26/01/2009, 10:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Hacer que los borders tengan el mismo alto

El ejemplo más simple (sólo dos columnas) es:
columnas equilibradas en www.araudi.net

De forma sucinta y rápida: verás que hay cuatro div:
caja_izq, caja_der, columna_izquierda, columna_derecha.

caja_izq contiene a caja_der, y ésta a las dos columnas. Jugando con la posición de estas dos últimas y sus márgenes, consigue Mikmoro que al crecer cualquiera de las dos columnas (que son las que alojan el texto), el resto lo hagan, pues las contienen.

Espero que te sirva como introdución al tema.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 26/01/2009, 11:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hacer que los borders tengan el mismo alto

Mira, hay una explicación más clara y extensa en las http://www.forosdelweb.com/f53/faqs-...ml#post2593702
__________________
Visita mi nueva web idplus.org
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 20:01.