Auto size div/iframe based upon content loaded inside of iframe

Question

I see alot of contradictory information on this online and I figured people here would know better than the vast majority of other places.

Is it possible to have an div with an iframe inside of it autosize the width (and possibly height) ->WITHOUT<- the use of javascript.. also it needs to be crossbrowser capable (browsers like lynx and ie5 are not a concern at all).

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).

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.

            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;
                }

---

<div id="topleftdiv" scrolling="no">
    <iframe id="topleftframe" name="topleftframe" scrolling="no"  allowtransparency="true" frameBorder="0">
    </iframe>
</div>
<div id="toprightdiv" scrolling="no">
    <iframe id="toprightframe" name="toprightframe" scrolling="no" allowtransparency="true" frameBorder="0">
    </iframe>
</div>
<div id="topmiddlediv" scrolling="no">
    <iframe id="topmiddleframe" name="topmiddleframe" scrolling="no" allowtransparency="true" frameborder="0" noresize>
    </iframe>
</div>

Answer 1

No, it's not possible. You need JavaScript to communicate the frame size back to the parent window.

The basic JavaScript, should you change your mind:

from the iFrame:

parent.document.getElementById('iframe_id').style.height =
    document.body.offsetHeight;