CSS que hace dos divisiones iguales de altura con la tabla de visualización

Question

En el siguiente HTML, div div. Y ft tienen diferentes alturas. Es posible hacer que ambos divs tengan la misma altura sin definir la altura. He intentado usar display: table pero no funciona.

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

Retire la float, que toma los elementos de flujo normal del documento, y también añadir en otro elemento de envoltura, para actuar como el table-row:

table-cell, se comporta como el elemento HTML <td>

Lo que implica que esto requiere (aunque no he verificado mi inferencia) un padre display: table-row, ya que td requiere un elemento primario 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.

Referencias:

• CSS display.

Answer 2

Algo como esto?

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

Saqué la propiedad float