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

As you asked the vertical alignment. I think you may need something that works like those.

1. http://jsfiddle.net/twksos/NXZxh/
2. http://jsfiddle.net/twksos/NfeQN/

I checked on firefox, chrome and safari. There are still some issues.

• in chrome and safari, you need to refresh to see the responsive but not just resize. (It's interesting and I'm looking at it.)
• in safari, the max-width for #small-dialog stop working.

And the core part should be

.image_container, .content {
    display: table-cell;
    background: #3D6AA2;
    vertical-align: middle;
    width: 50%;
}
@media (min-width: 1px) and (max-width: 638px) {
    .image_container, .content {
        width: 100%;
        display: block;
    }
}
#small-dialog {
    max-width: 850px;
    margin: 20px auto;
    background-color: #1C1C1C;
    padding: 0;
    line-height: 0;
    border: 1px solid red;
    display: table;/*newly added*/
    table-layout: fixed;/*newly added*/
}