title: Auto size div/iframe based upon content loaded inside of iframe
body: <p>I see alot of contradictory information on this online and I figured people here would know better than the vast majority of other places.</p>
  
  <p>Is it possible to have an div with an iframe inside of it autosize the width (and possibly height) -><strong>WITHOUT</strong>&lt;- the use of javascript.. also it needs to be crossbrowser capable (browsers like lynx and ie5 are not a concern at all).</p>
  
  <p>I have been tinkering and following various peoples suggestions online in regards to this for days but I still do not see my div and iframe limit their width to whatever data is loading in the iframe (just tables of random info).</p>
  
  <p>Here is some of the css I have and the associated html, as you can tell it has since gone through some revisions that do not have width:auto; height:auto etc.</p>
  
  <pre><code>            div#topleftdiv
                  {
                      float: left;
                      width: 25%;
                      height: auto;
                  }
  
              iframe#topleftframe
                  {
                      background-color: transparent;
                      -moz-opacity: .00;
                      filter: alpha(opacity=00);
                  }
  
  
              div#toprightdiv
                  {
                      float: right;
                      width: 25%;
                      height: auto;
                  }
  
              iframe#toprightframe
                  {
                      background-color: transparent;
                      -moz-opacity: .00;
                      filter: alpha(opacity=00);
                  }
  
              div#topmiddlediv
                  {
                      float: left;
                      width: 49%;
                      height: auto;
                      text-align: center;
                      align: center;
                      margin-left: auto;
                      margin-right: auto;
                  }
  
              iframe#topmiddleframe
                  {
                      width: 100%;
                      height: 40em;
                      text-align: center;
                      align: center;
                      margin-left: auto;
                      margin-right: auto;
                      -moz-border-radius: 15px;
                      border-radius: 15px;
                  }
  
              div#bottomdiv
                  {
                      clear: both;
                  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div id="topleftdiv" scrolling="no"&gt;
      &lt;iframe id="topleftframe" name="topleftframe" scrolling="no"  allowtransparency="true" frameBorder="0"&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div id="toprightdiv" scrolling="no"&gt;
      &lt;iframe id="toprightframe" name="toprightframe" scrolling="no" allowtransparency="true" frameBorder="0"&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div id="topmiddlediv" scrolling="no"&gt;
      &lt;iframe id="topmiddleframe" name="topmiddleframe" scrolling="no" allowtransparency="true" frameborder="0" noresize&gt;
      &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>