title: Trying to place div next to iframe
body: <p>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. </p>
  
  <p>On a firefox browser, when I inspected the contents using F12, the entire #news is missed out and never displayed on webpage.</p>
  
  <p>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..</p>
  
  <p>Here is my code.</p>
  
  <p>Thanks in advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function resizeIframe(iframe) {
      iframe.height = iframe.contentWindow.document.body.scrollHeight + 100 + "px";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="sect"&gt;
      &lt;iframe name="frame" src="IndexFrame.html" width="100%" onload="resizeIframe(this)"/&gt;
      &lt;div class="news"&gt; 
          &lt;p&gt;News and Upcoming Events&lt;/p&gt;
          &lt;p&gt;First News&lt;/p&gt;
          &lt;p&gt;Second News&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>