Seattle Web Design
Blog > How to position a page within an iframe

Meet the author:
Jill Olkoski

Jill has a MA in Clinical Psychology, a BS in Computer Science, and a BS in Mechanical Engineering.

She currently owns Aldebaran Web Design in Edmonds (near Seattle WA) and enjoys educating her clients on topics related to small business website design.

In Jill's previous life, she spent 17 years in the engineering and quality organizations of a Fortune 100 tech company.

 


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



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

  1. Valerie Says:

    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:

    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:

    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:

    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:

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

  6. Alec Hanson Says:

    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

  7. Pwlina Says:

    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




Our Preferred Website Hosting Company:

Need A Logo?


99Designs.com

Our Favorite Website Traffic Analysis Tool:

Web-Stat hit counters
 ©2006 - © Aldebaran Web Design Seattle, A DBA of Aldebaran Services LLC
Blog Email Subscription:
Search Blog Articles: