2 div floated but same height - html

Question

Here's my html
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div>
<div class="float float_txt">
text here!
<p class"a_p">a</p>
<p class"b_p">b</p>
<p class"c_p">c</p>
</div>
</div>
</div>
and css
.container{width:400px}
.box{display:inline-block}
.float{width:50%; float:left}
.float img{width: 100%; height:auto;}
.float_txt{background:red}
http://jsfiddle.net/MdtR8/1/
.container has a dynamic width (responsive design) and image will auto-resize itself.
I need to have .float_txt at same height as image, but I need a REAL height because I must divide a b c in percentage. Example:
.a_p, .b_p{height: 20%}
.c_p{height:60%}
How I can to this? only css no js :S

Answer 1

Why don't you solve it with JQuery. Here is the example of JQuery to calculate the height of .float img and add it to float_txt height.
$(".float_txt").css({
'height': $('.float img').height()
});
It's just one solution using JQuery. It's absolutely easier than using only css.
Jsfiddle

Answer 2

Here's one of the approaches.
I don't consider it to be the answer neither an elegant solution but this is one of the workarounds which actually meets the most important condition - it works (with some restrictions).
Here's the fiddle
First, we must assume that everything inside the .float_txt will be wrapped within those three paragraphs - they're meant to be 20%, 20% and 60% which is 100% all together so there's no more space for any other elements. Next, we wrap all three paragraphs with a div and put a copy of the image next to this div. We'll add the id="speculate" to the image.
The whole HTML will look like that:
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div><div class="float float_txt">
<img id='speculate' src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
<div class='content'>
<p class="a-p">a</p>
<p class="b-p">b</p>
<p class="c-p">c</p>
</div>
</div>
</div>
</div>
We'll use the #speculate image to set the height of the .float_txt div. The image will have visibility: hidden which makes it invisible but still occupying_ the space in its container. The .content div will be positioned absolutely and spread to the whole space of the .float_txt with top:0; right:0; bottom:0; left:0.
The paragraphs will be also positoned absolutely and placed with the top property. The disadvantage here is the fact that we must know the percentage heights of the preceding paragraphs, e.g. to position the second paragraph we must set top: 20% because the first paragraph has height: 20%. I hope it's clear.
The whole CSS will look like this:
.box {
display: inline-block;
}
.float {
display: inline-block;
width:50%;
}
.float img {
width: 100%;
height: auto;
}
.float_txt {
background: red;
position: relative;
}
#speculate {
width: 100%;
visibility: hidden;
display: block;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content p {
margin: 0;
position: absolute;
}
.content .static {
position: static;
}
.a-p {
height: calc(20% + 20px);
top: 20px;
}
.b-p {
height: 20%;
top: calc(20% + 20px);
}
.c-p {
height: 60%;
top: calc(40% + 20px);
}