Iframe positioning

Question

This is iframe code of google translate.

<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="/translate_p?hl=en&amp;ie=UTF8&amp;prev=_t&amp;sl=auto&amp;tl=en&amp;u=http://yahoo.co.jp/&amp;depth=1&amp;usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt;
</iframe></div>

I tried to do something similar with the same div and iframe tags but the html page does not end up like google translate.

<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="http://stackoverflow.com" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt;
</iframe></div>

The iframe appears right at the top of the page instead of appearing 160px later, as specified by the div.

I'm not sure what is wrong here with my code, which is almost the same as the Google code.

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.

Postmistress

Answer 1

It's because you're missing position:relative; on #contentframe

<div id="contentframe" style="position:relative; top: 160px; left: 0px;">

position:absolute; positions itself against the closest ancestor that has a position that is not static. Since the default is static that is what was causing your issue.

Salep

Do you know why Google Translate's page not have the position:relative but still works? Edit: Just tried putting position:relative in the <div>. It doesn't work :( – Postmistress

I'm not sure what part of Google Translate you're referring to, your iframe is part of your page and Google Translate is completely contained and separate to yours. – Salep

Google Translate is a page implemented by Google. Google Translate as a page, does not have position:relative in the <div>. Adding the position:relative also causes the div to shrink to a bar with small height. – Postmistress

Answer 2

you have to use this css property,

 position:relative;

use it for your #contentframe div tag

Libratory

John already mentioned that position relative is not suitable as a solution. – Quinones

Answer 3

Try adding the css style property

position:relative;

to the div tag , it works ,

Lawless

Answer 4

you should use position: relative; for one iframe and position:absolute; for the second;

Example: for first iframe use:

<div id="contentframe" style="position:relative; top: 100px; left: 50px;">

for second iframe use:

<div id="contentframe" style="position:absolute; top: 0px; left: 690px;">

Lianne