CODEWITHSUNDEEP
htmliframepositioncss-position
John Tan
John Tan

Reputation: 539

Iframe positioning

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.

Upvotes: 9

Views: 144374

Answers (4)

Subramonian Inian
Subramonian Inian

Reputation: 431

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;">

Upvotes: 1

user2536752
user2536752

Reputation: 31

you have to use this css property,

 position:relative;

use it for your #contentframe div tag

Upvotes: 3

Anurag-Sharma
Anurag-Sharma

Reputation: 4418

Try adding the css style property 

position:relative;

to the div tag , it works ,

Upvotes: 2

Daniel Imms
Daniel Imms

Reputation: 50259

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.

Upvotes: 8

Related Questions