title: Adjusting iframe within table
body: <p>I need advice on a simple exercise I am trying to do - I do not code to html UI usually.
  The following code attempts to load 2 iframes within table cells:    </p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
      &lt;table border="1"&gt;
      &lt;tr&gt;
      &lt;td&gt;
      &lt;div id='outerdiv '&gt;
      &lt;iframe src="book.jsp" id='outiframe' scrolling=no &gt;&lt; /iframe&gt;
      &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
      &lt;div id='summarydiv '&gt;
      &lt;iframe src="book-view.jsp" id='inneriframe' scrolling=no &gt;&lt; /iframe&gt;
      &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Obviously additional attributes have to be added to make the 2 iframes visible.<br>
  Currently,IE8 shows the iframes horizontally placed beside each other,with neither displaying in full.<br>
  Firefox only displays the top one.<br>
  What is the minimum  basic template needed here to make the 2 iframes adjust and be visible together - and resize well with the browser size.  </p>