html - CSS 2 Floating Div's Inside Container Full Height w/ Image -

i have container thats 900px wide 2 floating divs inside. need make column 2 background full height , dependent image left. text in column 2 needs vertically centered, again based on image height.

https://jsfiddle.net/rj5o6n79/1/

<div class="wrapper">    <div class="col span_2_of_3 content">       <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />    </div>    <div class="col span_1_of_3 box2">       column 2    </div>      <div style="clear:both;"></div>   </div> 

you can use jquery height of left div

var leftdivheight = $('.span_2_of_3').height(); $('.span_1_of_3').css('height',leftdivheight); 

then wrap content of inner div div

<div class="col span_1_of_3 box2">     <div class='innercontent'> column 2 </div> <!-- added div --> </div> 

then add css vertically center inner div

.innercontent{   position: relative;   top: 50%;   transform: translatey(-50%); } 

jsfiddle demo