Hacer que los borders tengan el mismo alto

[locoxchacho]

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

[kseso?]

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.

[locoxchacho]

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

[kseso?]

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.

[Mikmoro]

Mira, hay una explicación más clara y extensa en las http://www.forosdelweb.com/f53/faqs-...ml#post2593702