How to position a page within an iframe

October 19th, 2009

An 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):

#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>

Jill
--------------
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, psychological and interpersonal skills to help small business owners develop cost-effective and successful websites.

This entry was posted on Monday, October 19th, 2009 at 7:30 am and is filed under the Tidbits category. Read other Aldebaran Website Design Blog articles by returning to main blog page. Need a blog added to your website? Click here to read about blog installation services or click here to contact Aldebaran Web Design. You can skip to the end and leave a response. Pinging is currently not allowed.

5 Responses to “How to position a page within an iframe”

1. Valerie Says:
   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.

2. Jill Olkoski Says:
   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.

3. Elisa v Says:
   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)

4. Jill Olkoski Says:
   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!

5. dvector Says:
   May 14th, 2010 at 5:10 am

   same here! glad you kept a copy and thank you for sharing

Please Leave A Comment or Question:

(I'll respond to all questions by posting a reply as well as emailing you.)