Let me share with you one possible solution.
While not claiming to be the ultimate answer or the most elegant fix, this workaround satisfies the main requirement - it works (albeit with certain limitations).
Firstly, we need to ensure that all content within the .float_txt is encompassed by these three paragraphs, which are designated to occupy 20%, 20%, and 60% respectively, totaling 100% and leaving no room for additional elements. Then, we enclose these paragraphs in a div and position a duplicate image beside it, assigning the id="speculate" to this new image.
The HTML structure will resemble the following:
<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 utilize the #speculate image to dictate the height of the .float_txt div. This image remains hidden with visibility: hidden, still occupying space within its container. The .content div is absolutely positioned to fill the entire area of .float_txt using top:0; right:0; bottom:0; left:0.
Each paragraph is also placed absolutely based on their set percentage heights. For example, to position the second paragraph, we use top: 20% because the first paragraph spans height: 20%. I hope this explanation clarifies things.
The complete CSS implementation appears as follows:
.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);
}