css - How to achieve equal height of inner divs and float:left at the same time? -

i had 4 containers 4 inner divs, floated left auto height.

<div class="box">     <div class="head">         heading text     </div>     <div class="image">         image     </div>     <div class="text">         integer posuere erat ante venenatis dapibus posuere velit aliquet.     </div>     <div class="link"><a href="#">link text</a></div> 

.box{     width: 150px;     float: left; } 

complete jsfiddle: http://jsfiddle.net/h8w32/

to make inner divs height same througout of 4 containers, changed floated layout, , used display:table instead.

<div class="table">     <div class="row head">         <div class="cell">heading text</div>         <div class="cell">here lot longer heading text examplify</div>         <div class="cell">heading text</div>         <div class="cell">heading text</div>     </div>     <div class="row image">         <div class="cell">image</div>         <div class="cell">image</div>         <div class="cell">image</div>         <div class="cell">image</div>     </div>     <div class="row text">         <div class="cell">integer posuere erat ante venenatis dapibus posuere velit aliquet.</div>         <div class="cell">integer posuere erat ante venenatis dapibus posuere velit aliquet.</div>         <div class="cell">integer posuere erat ante venenatis dapibus posuere velit aliquet. integer posuere erat ante. dapibus posuere velit aliquet.</div>         <div class="cell">integer posuere erat ante venenatis dapibus posuere velit aliquet.</div>     </div>     <div class="row link">         <div class="cell"><a href="#">link text</a></div>         <div class="cell"><a href="#">link text</a></div>         <div class="cell"><a href="#">link text</a></div>         <div class="cell"><a href="#">link text</a></div>     </div> </div> 

-

.table{ display: table; }  .row{     display: table-row; }  .cell{     display: table-cell;     width: 150px; } 

http://jsfiddle.net/wh7pm/1/

this looks wanted to. lost perks using float, ability add more containers , automatically got pushed in next "row", or pushed new row if viewport small fit them. containers added same "row" if add more containers display:table layout.

is possible solve? want behaviour both display:table (equal height of heading divs , text divs) , float:left.

not possible without using javascript set heights. may want spec css flexible boxes, real css-only solution problem.

https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes

adoption of flexbox still in stages, if you're building cutting edge app targets modern browsers, may able away it.