Floating an iFrame to right of an image

Forum Moderators: not2easy

Message Too Old, No Replies

Floating an iFrame to right of an image

Possible?

trillianjedi

9:47 am on Jun 24, 2006 (gmt 0)

The effect I'm trying to achieve is something like:-

--------- ---------- 
Ś Image Ś Ś iFrame Ś 
--------- ----------

With no space in between the two.

I'm trying to put the iFrame inside a DIV set to float right, but I can't seem to get it to work right (iFrame always appears below the image).

Should I somehow nest this? If so, do I nest in a DIV or a P tag or something else?

Ultimately I also want to float the whole "block" (both elements together) to the right of the page...

Thanks,

encyclo

11:50 am on Jun 24, 2006 (gmt 0)

The following appears to work in FF1.5, Moz 1.7, IE6 and Konqueror 3.5, but strangely not in Opera 9:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div style="float:right;">
<p style="float:left;"><img src="image.gif" width="200" height="200" alt=""></p>
<iframe width="200" height="200" src="page.html"></iframe>
</div>
</body>
</html>

It's only a rough first start, it will need a bit more testing to see why Opera doesn't like it...

pageoneresults

12:05 pm on Jun 24, 2006 (gmt 0)

What about this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<div style="float:right;"> 
<p><img style="float:left;" src="image.gif" width="200" height="200" alt=""></p> 
<iframe width="200" height="200" src="page.html"></iframe> 
</div> 
</body> 
</html>

It's only a rough first start, it will need a bit more testing to see why Opera doesn't like it...

The only Opera referrers I see these days are from someone in Austin, Texas. ;)

[edited by: pageoneresults at 12:14 pm (utc) on June 24, 2006]

encyclo

12:14 pm on Jun 24, 2006 (gmt 0)

Thanks p1r, that fixes it for Opera 9, but breaks it for Konqueror 3.5. :(

pageoneresults

12:16 pm on Jun 24, 2006 (gmt 0)

How about if you add a float:right to the <iframe> element?

<added> No, that won't work. :(

What breaks in Konqueror?

encyclo

12:25 pm on Jun 24, 2006 (gmt 0)

In Konq 3.5 the

iframe

drops below the image when the

float:left;

is on the

img

rather than on the paragraph. Opera 9 has the same problem but in reverse! :(

pageoneresults

12:32 pm on Jun 24, 2006 (gmt 0)

Would a display:inline on the <iframe> do anything? I can't test since I don't have Konqueror on the system.

encyclo

12:40 pm on Jun 24, 2006 (gmt 0)

Would a display:inline on the <iframe> do anything?

On the

iframe

, no, but on the

yes! So we can simply remove the block element around the image:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div style="float:right;">
<img style="float:left;" src="image.gif" width="200" height="200" alt="">
<iframe width="200" height="200" src="page.html"></iframe>
</div>
</body>
</html>

Seems to work. :)

trillianjedi

1:50 pm on Jun 24, 2006 (gmt 0)

Seems to work

Indeed it does!

Thanks guys - makes it look so easy...