Iframe Positioning To Act Like An Image

Hi, I had asked a related question on this here: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24387187.html#a24327996 but closed it and wanted to follow-up with another question.  

I am wondering if it's possible to treat this iframe snippet like an image to have text wrap around it or to be able to embed it into a table.  I'll give code samples for both CSS and Table layouts that I've been playing with.  

The CSS example is straight forward, the iframe is on top of the text and doesn't wrap.  

In the table, it works fine if the window is large enough, but if you re-size the window to where scroll bars show up, the iframe covers up the text again.  

This may or may not be possible, just seeking some expert advice or a second opinion.  Thanks!  

CSS Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe CSS Example</title>
</head>
<body>
<div>something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left something left
      <div style="width: 400px; position: relative; float: right;">
            <div style="position: absolute; left: -250px; top: -350px; clip:rect(165px 595px 415px 160px);">      
                  <iframe width="595" height="415" src="http://yahoo.com" scrolling="no"></iframe>
            </div>
      </div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe Table Example</title>
</head>
<body>
<table width="95%" border="0" cellspacing="0" cellpadding="3" align="center" width="900">
	<tr>
		<td width="150">Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left Uppper Left </td>
		<td width="600">
			<div style="width: 400px; position: relative; float: right;">
				<div style="position: absolute; left: -250px; top: -375px; clip:rect(165px 595px 415px 160px);">      
					<iframe width="595" height="415" src="http://yahoo.com" scrolling="no"></iframe>
				</div>
			</div>
		</td>
		<td width="150">Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right Upper Right </td>
	</tr>
	<tr>
		<td>Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left Lower Left </td>
		<td>Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid Lower Mid </td>
		<td>Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right Lower Right </td>
	</tr>
</table>
 
</body>
</html>

Open in new window

tresmanosAsked:
Who is Participating?
 
xberryConnect With a Mentor Commented:
Ok, I understand what you would like to achieve, but this would require the combination
of what we solved in the last issue (parent div relative and child absolute positioning)
with floating that positioned element and ... this as far as I can see...  and I have actually
tried lots and done hours research on this too - ... is not really working out, sorry.

One last hope though: Since the last issue could be solved very easily now this one
seems only possible with a very complicated code implementation in javascript.
When browsing on the net I found some indications such like on this site
http://www.dyn-web.com/tutorials/iframes/

Only - I am myself not a hero in the javascript and thus recommend you to put this question
into the zone of javascript or AJAX and maybe additionally to HTML or web applications.
Short: I see that with CSS we came to a dead end here.
0
 
xberryCommented:
>>I am wondering if it's possible to treat this iframe snippet like an image to have text wrap around it or to be able to >>embed it into a table.  I'll give code samples for both CSS and Table layouts that I've been playing with.  

Of course, however, unless you use your tables as datasheets ... please refrain from using them in html for
layout purpose .. it really is ugly and outdated.

Basically you can use your iframe anywhere in the layout with the help of div-block-elements.
The basic rule to keep in mind however is: div-elements always need a dimension, i.e
either height or width, possible in percentages, too.

I'll try your concept on my computer later and see if i can work it out right for you. hold on.
0
 
xberryCommented:
So, try the code below. The text wraps one time left, one time right.
This should be ok for you, simply transfer to your own needs.
If you minimize the browser window, you'll see that text wraps around fluid, while
iframe stays stable ;-))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe CSS Example</title>
<style type="text/css">
	#example { width: 100%; }
	
	iframe {
		width: 595px;
		height: 415px;
	}
 
	#example1 { 
		float: left;
		margin-right: 10px;
	}
	#example2 { 
		float: right;
		margin-left: 10px;
	}
</style>
</head>
<body>
	<div id="example">
		<iframe src="http://yahoo.com" scrolling="no" id="example1">Alternate content</iframe>
		<p>
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		The text wraps to the right of the iframe. This is example text. This is example text.
		</p>
		<br style="clear: left;"></br>
		<p>Some text between. Some text between. Some text between. Some text between. 
		Some text between. Some text between. Some text between. Some text between. 
		Some text between. Some text between. Some text between. Some text between. </p>
		<iframe src="http://yahoo.com" scrolling="no" id="example2">Alternate content</iframe>
		<p>
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		The text wraps to the left of the iframe. This is example text. This is example text.
		</p>
		<br style="clear: right;"></br>
	</div>
</body>
</html>

Open in new window

0
 
tresmanosAuthor Commented:
I think the sticking point here is where I wanted to just use the "feature" section of the yahoo page and not start at the 0,0 x,y coordinates of the iframe target.  

I am a novice with CSS, so the only way I could accomplish this was to use negative values in my positioning.  I don't know if there is any other way or that it's even possible to do this.  

Not sure if your a MAC person, but what gave me the idea to try to do this in web pages is the MAC dashboard where you can take a portion of a web page and put it on the dashbord as a "widget" by doing the "File - Open in Dashboard" while in Safari.  I thought if I could do this on a web page, that would be an awesome capability to have in my back pocket.  
0
 
tresmanosAuthor Commented:
Thanks for all your help, I'll look into this more.  Appreciate your time
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.