Responsive Popup Window

Question

I'm using Magnific Popups ajax popup to to create a popup experience somewhat like Instagram (image on the left, comments on the right, etc). I'm trying to figure out how to make the left and right content box always the same height. If the image on the right is too large it will just fit the div accordingly because it should be responsive. Also, if the entire browser were to become smaller (on a mobile device maybe) the image would appear on top and the content on the bottom.

The image and content are floated as such:

.image_container, .content {
    width: 50%;
    float: left;
}

And the float is just cleared with the screen size is reduced using media queries.

I've made a jsfiddle to help understand what I'm trying to explain:

jsFiddle

If you click 'open' and resize the iframe you'll see the effect I'm lookng for.

So how would the view container have a set size and the left and right content areas always be the same height? Just simply looking at the example you can see that it looks a little funny.

EDIT

I've also tried centering the image vertically and that seems to be a challenge too. I've tried making the css display a table cell then trying vertical-align: middle but that didn't end up working.

The solution should work on all modern browsers.

Answer 1

You are looking for some like this?
http://jsfiddle.net/d7hA5/

Consider the following function:

// Handles the resize event
$(window)
    .off(".resizeImage")
    .on("resize.resizeImage", fnResizeImage);

// Resizes the content2 to fit with image height
function fnResizeImage (e) {
    var imgHeight = $('div.image_container > img').outerHeight(true);
    var cnt1Height = $('div.content > div.content1').outerHeight(true);
    var cnt2 = $('div.content > div.content2').outerHeight(imgHeight - cnt1Height);
}

Also is recommended take a look at the plugin documentation: Magnific-popup API