Trying to place div next to iframe

Question

I am attempting to place a div (class #news) on right hand side of iframe wrapped by another div, 'sect'. iframe is displayed properly inside #sect, but when I placed #news with float:right property, it just won't display it.

On a firefox browser, when I inspected the contents using F12, the entire #news is missed out and never displayed on webpage.

Btw, when I inspected on firefox browser, #sect has 0px height. iframe's height is dynamically set using javascript depending on height of page inside. #sect is placed under a navigation bar. I struggled for few days and still have no solution..

Here is my code.

Thanks in advance

function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + 100 + "px";
}

#sect
{
    max-width:1000px;
    min-width:100px;
    width:100%;
    position:relative;
    z-index:-1;
    margin:auto;
}

#sect iframe
{
    max-width:750px;
    min-width:75px;
    width:100%;
    position:relative;
    display:inline;
    float:left;
    border: none;
    box-shadow: 6px 6px 3px #888888;
    border-radius: 10px;
    padding: 10px;
    background-color:#fff;
}
#sectnews
{
    position:relative;
    background-color:#fff;
    float:right;
    width:200px;
    z-index:55;
}

#news p
{
    font-size:10px;
    display: block;
    width:200px;
    float:right;
}

<div id="sect">
    <iframe name="frame" src="IndexFrame.html" width="100%" onload="resizeIframe(this)"/>
    <div class="news"> 
        <p>News and Upcoming Events</p>
        <p>First News</p>
        <p>Second News</p>
    </div>
</div>

Answer 1

You need to correct the closing tag of iframe

<iframe name="frame" src="IndexFrame.html" width="100%" onload="resizeIframe(this)"></iframe>

DEMO