title: Iframe positioning
body: <p>This is iframe code of google translate.</p>
  
  <pre><code>&lt;div id="contentframe" style="top: 160px; left: 0px;"&gt;
  &lt;iframe src="/translate_p?hl=en&amp;amp;ie=UTF8&amp;amp;prev=_t&amp;amp;sl=auto&amp;amp;tl=en&amp;amp;u=http://yahoo.co.jp/&amp;amp;depth=1&amp;amp;usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;"&gt;&amp;lt;/div&amp;gt;
  &lt;/iframe&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I tried to do something similar with the same div and iframe tags but the html page does not end up like google translate.</p>
  
  <pre><code>&lt;div id="contentframe" style="top: 160px; left: 0px;"&gt;
  &lt;iframe src="http://stackoverflow.com" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;"&gt;&amp;lt;/div&amp;gt;
  &lt;/iframe&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The iframe appears right at the top of the page instead of appearing 160px later, as specified by the div.</p>
  
  <p>I'm not sure what is wrong here with my code, which is almost the same as the Google code.</p>
  
  <p>Edit:
  The adding of the position:relative to the  tag is not suitable as a solution. It shrinks the div into a bar with a small height. It also means that the exact position of the  with respect to the page cannot be specified as a result.</p>