CSS che creano due div all'altezza con tabella di visualizzazione

Question

Nel seguente codice HTML, div .left e .right hanno altezze diverse. È possibile rendere entrambe le div stesse della stessa altezza senza definire l'altezza. Ho provato a usare display: table ma non funziona.

HTML:

<div class="wrap"> 

    <div class="left"> 
     Lorem  
    </div> 

    <div class="right"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div> 

</div> 

CSS:

.wrap{ 
    overflow:hidden; 
    width:250px; 
    display: table; 
    border-collapse: collapse; 
} 


.left{ 
    width:100px; 
    float:left; 
    display: table-cell; 
    border-bottom:1px solid green;  
} 


.right{ 
    width:150px; 
    float:left; 
    border-bottom:1px solid red; 
    display: table-cell;  
} 

jsfiddle: http://jsfiddle.net/fJbTX/1/

Answer 1

Rimuovere il float, che prende gli elementi di flusso normale del documento, e anche aggiungere un altro elemento di involucro, per fungere da table-row:

table-cell, si comporta come l'elemento HTML <td>

Che implica che questo richiede (anche se non ho verificato la mia inferenza) un genitore display: table-row, come td richiede un elemento genitore tr.

.wrap{ 
    overflow:hidden; 
    width:250px; 
    display: table; 
    border-collapse: collapse; 
} 

.row { 
    display: table-row; 
} 
.left{ 
    width: 50%; 
    display: table-cell; 
    background-color: #0f0; 
} 


.right{ 
    width: 50%; 
    background-color: #f00; 
    display: table-cell;  
}​ 

JS Fiddle demo.

Riferimenti:

• CSS display.

Answer 2

qualcosa di simile?

http://jsfiddle.net/fJbTX/3/

ho tirato fuori la proprietà float