title: Responsive Website
body: <p>I'm trying to build a simple responsive site.</p>
  
  <p>For the most part everything is working. But as soon as I start to shrink the site, the YouTube video gets bumped onto the next row. Is there a way to fix this so it stays aligned with the ad to the left?</p>
  
  <p>Here is a link to the demo site:
  <a href="http://ctrice.ca/test/rwd/" rel="nofollow">http://ctrice.ca/test/rwd/</a></p>
  
  <p><strong>This is the css I'm using.</strong></p>
  
  <pre><code>#ad{ width:100%; max-width:288px; min-height:330px; margin-right:2%; float:left; }
  
  #trailer{ width:100%; max-width:540px; min-height:330px; position:relative; float:left; }
  
  #trailer iframe,
  #trailer object,
  #trailer embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p><strong>This is the HTML code:</strong></p>
  
  <pre><code>&lt;div id="ad"&gt;&lt;img src="img/ad.jpg" alt="ad" /&gt;&lt;/div&gt;
  
  &lt;div id="trailer"&gt;
  &lt;iframe width="460" height="315" src="http://www.youtube.com/embed/C4uOSz1Z9GM" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>