Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Iframe Positioning To Act Like An Image

Avatar of tresmanos
tresmanos asked on
CSS
5 Comments1 Solution692 ViewsLast Modified:
Hi, I had asked a related question on this here: https://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>
ASKER CERTIFIED SOLUTION
Avatar of xberry
xberryFlag of Germany image

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers