How to position a page within an iframe
October 19th, 2009An iframe, is an HTML element that gives you a window through which you can view another website. But sometimes, you want to show just a particular piece of that other website. I thought this was impossible to do, until today, when I found an article that told me how to do it.
This tidbit of information is so valuable, that I want to capture it here so that if the other person removes it, I’ll still have it. The article was found on the Cyberstarweb.com website, and is entitled: “How to position a page within an iframe using CSS“. Just a brilliant solution that uses an outerdiv (that controls the size of the iframe) and an inner div (that controls the positioning on the framed page):
Jill#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
<div id=’outerdiv’>
<iframe src=”http://www.websitethatisinsideframe.com/” id=’inneriframe’ scrolling=no></iframe>
</div>
--------------
J. Olkoski
Aldebaran Web Design, Seattle
Jill Olkoski has a BS in Engineering, a BS in Computer Science and an MA in Clinical Psychology. She delights in using her advanced technical and psychological skills to help small business owners develop cost-effective and successful websites.
October 19th, 2009 at 2:46 pm
Hi Jill, does this solution work on an iPhone? I recently discovered a page I designed using an iframe doesn’t load on the iphone so I’m feeling cautious about using iframes. BTW, love your blog.
October 19th, 2009 at 3:15 pm
Hi Valerie,
That’s a great question. The client I found this solution for ended up not using the iframe, so I can’t check it out (I do have an iPhone). In general, I never use iFrames when designing websites. In this case, the code was viewing a subscription system on another URL, so there was no way around it, no other way to embed it.
January 25th, 2010 at 1:35 pm
Thanks for saving this tip on your website.
Actually, it seems that the original article was deleted like you thought it will be…
Thanks again, have a nice day ! (you saved mine)
January 25th, 2010 at 1:42 pm
Holy cow…I can’t believe it was deleted…well, I’ll be very, very sure to always duplicate any code help in the future – and glad it helped. It totally saved my day too!
May 14th, 2010 at 5:10 am
same here! glad you kept a copy and thank you for sharing
June 19th, 2010 at 3:29 am
Jill,
That is SOOOO Cool. I just love it! How great is that amazing.
Am so grateful to you for capturing the info from Cyberstarweb.com as it is no longer available.
Many many thanks
Alec
January 18th, 2012 at 6:35 am
Hello and thanx for the article. I’m building a website using wordpress. WordPress has some usefull plugins using iframe but none of them lets me locate the website inside the iframe in the position that i want. I tried with the code that you give but.. wordpress doesn’t allow css in the html code that i can add and it erases the code automatically.I hope you understand what i mean, sorry if my english are not good.If you have any idea to help, it would be great. Thanx in advance!
Pwlina