title: CSS - Floating an iframe
body: <p>All,</p>
  
  <p>In a centred layout (960px width; margin: 0 auto;), I have two menu bars, one floated to the left &amp; other to the right, underneath both of which I want to float an iframe. </p>
  
  <p>Unfortunately, it does not appear to be floating. The iframe moves to the left most available space of the viewport. Unfortunately, I cannot use absolute positioning due to the layout being centred &amp; having max. width of 960px.</p>
  
  <p>Is there a way to make this happen please?</p>
  
  <p><strong>EDIT</strong>:
  Further to the comments, for which Im grateful, here is the code.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;iframe id="iframing" src="mannequin.html" width="640" height="500" frameborder="0" &gt;&lt;/iframe&gt;&lt;br /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      min-width: 960px;
      height: 100%;
      background: rgba(255,255,255,0.8);
      margin: 0 auto;
      position: relative;
  } /* The is the main container on body */
  
  #iframing {
      float: left;
      width: 640px;
      height: 500px;
      margin: 10px auto 10px;
      clear: both;
  }
  </code></pre>