Responsive Lightbox

Question

I'm using Magnific Popups ajax popup to to create a popup experience somewhat like Instagram or Facebook (image on the left, comments on the right, etc). How would I go about setting a max height for the entire lightbox and center the image when it can be centered vertically? This needs to work in all browsers and has to be responsive which is tricky. I can't seem to get it working properly across all browsers. I suppose I don't mind a jQuery solution as this is what I might need.

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

Try re-sizing the iframe to check out the effect.

Answer 1

the best way will be jqueryUI resize.

if you want that your div(the container) will change by the windows size you should do somesing like that:

$(window).resize(function() {
    var docheight = $(document).height();
    $("#container").height(docheight);
});