title: Responsive Popup Window
body: <p>I'm using <a href="http://dimsemenov.com/plugins/magnific-popup/" rel="nofollow">Magnific Popups</a> 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.</p>
  
  <p>The image and content are floated as such:</p>
  
  <pre><code>.image_container, .content {
      width: 50%;
      float: left;
  }
  </code></pre>
  
  <p>And the float is just cleared with the screen size is reduced using media queries.</p>
  
  <p>I've made a jsfiddle to help understand what I'm trying to explain:</p>
  
  <p><strong><a href="http://jsfiddle.net/d7hA5/2/" rel="nofollow">jsFiddle</a></strong></p>
  
  <p>If you click 'open' and resize the iframe you'll see the effect I'm lookng for.</p>
  
  <p>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.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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 <code>vertical-align: middle</code> but that didn't end up working.</p>
  
  <p>The solution should work on all modern browsers.</p>