How do I make right div height equal to dynamically sized left div?

Question

See Below for the Self-contained Example

Pictures of what I am trying to do, and what I actually get:

I want to create css rules so that my content looks like this (correct):

I am struggling to find a simple solution online, so my content looks like this (wrong):

Summary of what I'm trying to achieve:

I couldn't find a solution on stackoverflow or any css blog which provided solutions to similar but incompatible problems.

I have two floated divs, left and right on a row div. The left div contains an image that stretches out until it is the width of the left div. The left div's height is dependent on the img it contains. This is the height that I want the right div to conform to. I need this conformity so that when there is no more room on the right div, the overflow:hidden code will hide the excess text.

Fixed heights are not allowed. I am trying to avoid Java Script for this . Is there a solution in pure CSS?

CSS snippet

.left {
    float:left;
    width:50%   
}

.right {
    float:right;
    width:50%;
    background-color:darkgrey;
    overflow:hidden;
}

img {
    min-width:100%;
    height: auto;
    width: 100%;    
}

As you can see, I don't have any code here to handle equal div heights because all the solutions I've tried have not worked.

Here is my jsfiddle so you can see the problem:

http://jsfiddle.net/1upodwg9/

Answer 1

Fiddle

http://jsfiddle.net/1upodwg9/14/

.child-row {
        display:block;//added
        background:red;
    }

    .left {
        float:left;
        width:50%;
        height:100%;//added
        display:inline-block;//added

    }

    .right {   
        width:50%;
        background-color:darkgrey;
    display: inline-block;//added
    }

Fiddle example when you have more content

http://jsfiddle.net/1upodwg9/15/

Answer 2

Something like this fiddle ?

 $(window).resize(function () {
 var height = $("#leftDiv").css("height")
 $("#rightDiv").css("height", height);
 });

Answer 3

If you're only catering to IE8+ and/or modern browsers you can use display: table , display: table-row , display: table-cell

.parent {
    margin: auto;  /* helps place in middle */
    width: 70%;
    display: table;
}

.child-row {
    display: table-row;
}

.child-col {
    display: table-cell;
    vertical-align: top;
}

Example: http://jsfiddle.net/1upodwg9/16/

(Sorry, I changed the image cos for some reason it wasnt loading on my end)

EDIT: Actually, it doesn't work for when the image is too small (the right col will set the height)

Answer 4

To use overflow: hidden; the container would need a defined height, otherwise it doesn't know where the overflow begin. Since you want to have a dynamic image (with different heights) I'm afraid you have to use javascript.