Come rendere le immersioni interne fluttuanti alla stessa altezza del div più alto

Question

Nel seguente codice vorrei che il div con 'y' corrisponda all'altezza del div con i 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> 

da notare sono div interni sono flottanti.

Answer 1

Se non sei avversa ad un po 'di jQuery, è possibile utilizzare EqualHeight, che dovrebbe fare quello che vuoi

Answer 2

Hai tre opzioni.

1. Rende i div interni tanto alti quanto il div esterno. Questo non è troppo difficile;
2. Metti i div interni in un altro div e prova ad usare altezza e/o altezza minima del 100% per renderli alti come il div contenente, anche se sospetto che questo non funzionerà in quanto il div contenente sarà probabilmente allungato fino all'altezza del suo div di contenimento o della pagina. Potrebbe valere la pena un colpo però; o, il più semplice di tutti
3. Usa tabelle. Questo problema è banale con le tabelle. È un buon esempio di pure CSS deficiencies.

Non esiste un modo semplice per "dividere" l'altezza di due div. Trucchi come il 100% di altezza hanno problemi di cross-browser sia in termini di attributi CSS che devi usare e con i bordi, che stai usando. I bordi sono in genere in aggiunta a qualsiasi altezza che si utilizza.

Alcuni potrebbero dire utilizzare display: table-cell ma il supporto per questo è piuttosto limitato (su IE).

Answer 3

C'era una soluzione che ho visto in A List Apart (credo), in cui si dà il due colonne interne un'enorme imbottitura inferiore, ma lo stesso enorme valore di un margine negativo. Tutto funziona fintanto che la colonna non è più alta di 32000px, il che è raro. Qualcosa di simile:

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

... dove "col" è il nome di classe per qualsiasi colonna. Puoi quindi personalizzare le singole colonne come preferisci con una classe separata.

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

Un'altra opzione è quella di utilizzare un'immagine di sfondo sul div esterno, compresi i tuoi confini, ecc Questo approccio significa, ovviamente, è un po 'più difficile da modifiche delle colonne (larghezze, colori), una volta impostati.