Question

I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.

Is there a way to accomplish this without javascript?

http://jsfiddle.net/5JU2t/

Answer 1

The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.

Just remember to position the parent (.main) div relatively and remove all of the floats:

.right {
    bottom:0;
    position: absolute;
    right:0; 
    top: 0;
}

.main {
    position: relative;
}

Working example: http://jsfiddle.net/5JU2t/1/

Note

The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:

Working example: http://jsfiddle.net/5JU2t/2/