¿Cómo mantengo dos elementos div uno al lado del otro a la misma altura?

Tengo dos elementos div uno al lado del otro. Me gustaría que la altura de ellos fuera la misma y que permaneciera igual si uno de ellos cambia de tamaño. Si uno crece porque se coloca texto en él, el otro debería crecer para igualar la altura. Aunque no puedo entender esto. ¿Algunas ideas?

<div style="overflow: hidden">
    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
        Some content!<br />
    </div>

    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Some content!
    </div>
</div>

Expandir fragmento

Jun 08 '10 20:06 NibblyPig

Caja flexible

Con flexbox es una declaración única:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Expandir fragmento

Es posible que se requieran prefijos para navegadores más antiguos; consulte la compatibilidad con navegadores .

Dec 18 '2013 22:12 Pavlo

Este es un problema común con el que muchos se han encontrado, pero afortunadamente algunas mentes inteligentes como la de Ed Eliot en su blog han publicado sus soluciones en línea.

Básicamente, lo que se hace es hacer que ambos divs/columnas sean muy altos agregando a padding-bottom: 100%y luego "engañar al navegador" haciéndoles creer que no son tan altos usando margin-bottom: -100%. Ed Eliot lo explica mejor en su blog, que también incluye muchos ejemplos.

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

Expandir fragmento

Jun 08 '2010 13:06 lambda

Esta es un área donde CSS nunca ha tenido ninguna solución: lo único que se puede hacer es usar <table>etiquetas (o falsificarlas usando los display:table*valores de CSS), ya que ese es el único lugar donde se implementó "mantener un montón de elementos a la misma altura".

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

Expandir fragmento

Esto funciona en todas las versiones de Firefox, Chrome y Safari, Opera desde al menos la versión 8 y en IE desde la versión 8.

Jun 08 '2010 14:06 Paul D. Waite