Cómo hacer que los divs internos flotantes tengan la misma altura que el div más alto

Question

En el siguiente código, me gustaría que el div con 'y' coincida con la altura del div con las 3 'x's.

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;"> 
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;"> 
    x<br/>x<br/>x 
</div> 
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;"> 
    y 
</div> 

A tener en cuenta son los divs interiores están flotando.

Answer 1

Si usted no es adversa a un punto de jQuery, puede utilizar EqualHeight, se debe hacer lo que quiera

Answer 2

Tiene tres opciones.

1. Haga que los divs internos sean tan altos como el div externo. Esto no es muy difícil;
2. Coloca los divs internos dentro de otro div e intenta usar alturas y/o alturas del 100% para que sean tan altos como el div que contiene aunque sospecho que esto no funcionará ya que el div que contiene probablemente se estirará a la altura de su div que contiene o la página. Aunque valdría la pena intentarlo; o, más fácil de todos
3. Usar tablas. Este problema es trivial con tablas. Es un buen ejemplo de pure CSS deficiencies.

No hay una manera simple de dividir dos divs de altura. Trucos como el 100% de altura tienen problemas entre navegadores tanto en términos de los atributos de CSS que necesita usar como con los bordes que está utilizando. Los bordes son típicamente adicionales a cualquier altura que use.

Algunos podrían decir usar display: table-cell pero la compatibilidad es bastante limitada (en IE).

Answer 3

Hubo una solución que vi en A List Apart (creo), donde se aplica la dos columnas internas un relleno de fondo enorme, pero el mismo valor enorme como un margen negativo. Todo esto funciona siempre que la columna no tenga más de 32000 px de alto, lo cual es raro. Algo como:

.col { 
    float: left; 
    padding-bottom: 32000px; 
    margin-bottom: -32000px; 
} 

... donde "col" es el nombre de clase para cualquier columna. A continuación, puede diseñar columnas individuales como desee con una clase separada.

<div class="col xxx">x<br />x<br />x</div> 
<div class="col yyy">y</div> 

Otra opción es utilizar una imagen de fondo en el div exterior, incluyendo sus fronteras etc. Este enfoque, obviamente, significa que es un poco más difícil a los cambios de las columnas (anchos, colores) Una vez configurado.