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

Question

I have a container thats 900px wide with 2 floating divs inside. I need to make column 2 background full height and dependent to the image to the left. The text in column 2 also needs to be 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">
This is column 2
</div>
<div style="clear:both;"></div>
</div>

Answer 1

You can use jQuery to get the height of the left div
var leftDivHeight = $('.span_2_of_3').height();
$('.span_1_of_3').css('height',leftDivHeight);
then wrap the content of your inner div to another div
<div class="col span_1_of_3 box2">
<div class='innerContent'> This is column 2 </div> <!-- added div -->
</div>
then add this css to vertically center your inner div
.innerContent{
position: relative;
top: 50%;
transform: translateY(-50%);
}
JSFIDDLE DEMO

Answer 2

Is this what you want?
body { margin:0; padding:0; }
.wrapper { border:1px solid green; width:900px; margin:0px auto; }
.content {
width: 100%; /* or whatever is required */
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
}
img {
position: relative; /* allows repositioning */
/*left: 100%; move the whole width of the image to the right */
/* margin-left: -200%; magic! */
float:left;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin:0;
}
.col:first-child { margin-left: 0; }
.box { background-color: #ccc; }
.box2 { background-color: red; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 33.8%;
height: 400px;
}
.content {
position: relative;
top: 50%;
text-align:left;
}
<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">
<div class="content">
This is column 2
</div>
</div>
<div style="clear:both;"></div>
</div>

Answer 3

I think, I have more or less found what you are looking for. Though the second column isn't full height it is vertically centered and just as big as it needs to be.
.wrapper {
width: 900px;
border: 1px solid #000000;
display: inline-block;
}
.col img{
display: block;
}
.content {
vertical-align: middle;
display: inline-block;
}
.box2 {
display: inline-block;
vertical-align: middle;
}
<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">
This is column 2
</div>
<div style="clear:both;"></div>
</div>

Answer 4

I have a solution of your problem checkout this demo, I think it's working for you. Here is the code:
body { margin:0; padding:0; }
.wrapper {
border: 1px solid green;
width: 900px;
margin: 0px auto;
/* background: #f00; */
display: table;
table-layout: fixed;}
.content {
width: 100%; /* or whatever is required */
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
}
img {
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
}
/* COLUMN SETUP */
.col {
display: table-cell;
vertical-align: middle;
}
.col:first-child { margin-left: 0; }
.box { background-color: #ccc; }
.box2 { background-color: red; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 33.8%;
}
td{ background:#000; color:#fff;}
<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">
This is column 2
</div>
<div style="clear:both;"></div>
</div>