title: How do size a simulated smartphone screen in a responsive div?
body: <p>So I'm trying to show off a mobile site within a div that looks like a smartphone that is placed on a responsive html5 site. I've messed with the CSS so that the smartphone div keeps a solid aspect ratio as the width of the window is adjusted. Now I am trying to fit an iframe within the div to simulate the phone's screen. <strong>The problem I run into is that my responsive CSS trick is messing with the position of the screen.</strong></p>
  
  <p>Here is a jFiddle: <a href="http://jsfiddle.net/E6X4j/2/" rel="nofollow">http://jsfiddle.net/E6X4j/2/</a></p>
  
  <p>I've tried to position it relative, but that messes with the responsive trick in CSS. Any suggestions?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="smartphonewidth"&gt;
  &lt;div id="smartphoneheight"&gt;
      &lt;object type="text/html" data="http://www.engadget.com" style="width:100%; height:100%;"&gt;    
      &lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#smartphonewidth {
        margin-left: 5%;
        background-image: url('http://i.imgur.com/lavEp8B.png?1?5267');
        background-repeat: no-repeat;
        width: 50%;
        padding: 20%;
        background-size: 100% 100%;}
  
  #smartphoneheight {
      position: absolute;}
  </code></pre>