title: Force a div to "float" next to iframe?
body: <p>I'm working on a responsive site and recently manage to get a vimeo clip to become responsive by using the embed code at <a href="http://embedresponsively.com/" rel="nofollow">http://embedresponsively.com/</a>.</p>
  
  <p>Only problem is that when ever I try to get a div to float next to the embedded iframe the Vimeo movie disappears? And the div wont display next to the iframe within the wrapper neither. </p>
  
  <p>Does someone know how to force a div to display next to (to the right) a iframe without using float or inline-block since that won't work(?) and at the same time keeping the scaling/responsive effect of the vimeo-movie?</p>
  
  <p>Thank you in advance!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="case_wrapper"&gt;
      &lt;div class="movie_wrapper"&gt;
          &lt;div class='embed-container'&gt;
              &lt;iframe src='http://player.vimeo.com/video/18085160' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;
              &lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="movie_info"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.case_wrapper {
      width:1200px;
      height:500px;
      background:#5340AA;
  }   
  
  .movie_wrapper {
      max-width:860px;
      max-height:500px;
  }
  
  .movie_info {
      width:300px;
      height:500px;
      margin-left:40px;
      background:#53FF00;
  }
  
  .embed-container { 
      position: relative; 
      padding-bottom: 56.25%; 
      height: 0; 
      overflow: hidden; 
      max-width: 100%; 
      height: auto; 
  } 
  
  .embed-container iframe, .embed-container object, .embed-container embed { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
  }
  </code></pre>