How to position a page within an iframe using CSS

Here is a useful technique to position a page within an iframe using CSS. This allows to show part of a web page within the iframe and positioned to a specific spot on the page within the iframe.

*Many sites block their content from iframes, this technique will not work on sites that block iframes. You will need to use a server side scraping method on those sites.

Here is an example of this css and iframe pseudo "scraping" method that shows the "Tutankhamun" box on the Wikipedia page:

This is the CSS and html code to accomplish the task:
<style>
#outerdiv {
width: 250px; position: relative;
}
#innerdiv {
position: absolute; left: -320px; top: -220px;clip:rect(220px 600px 660px 0px);
}
</style>
<div id="outerdiv">
<div id="innerdiv">      
<iframe width="600" height="660" src="http://en.wikipedia.org/wiki/Tutankhamun" scrolling="no" frameborder="0"></iframe>
</div>
</div>

12 Responses to How to position a page within an iframe using CSS

  • omen says:

    looks great in firefox and chrome. kind of messy in interet explorer though.

  • Anshuman says:

    I am using the code provided above to position a page within an iframe using CSS but when i try testing it by making a simple html file with all that code above then it doesnt seems to work.

    The code i put in the test html file is :-

    TEST

    #outerdiv
    {
    width:446px;
    height:246px;
    overflow:hidden;
    position:relative;
    }
    #inneriframe
    {
    position:absolute;
    top:-412px;
    left:-318px;
    width:1280px;
    height:1200px;
    }

    But this doent seems to work please help me if I am missing something.

    Thankyou

  • Rick says:

    Thanks, this really helped me out!

  • Buzzknow says:

    Lol .. this trick work very well :d

    who cares about IE :D

  • worked for me, put html tags around css says:

    don’t forget html tags code works fine….

    #outerdiv
    {
    width:446px;
    height:246px;
    overflow:hidden;
    position:relative;
    }

    #inneriframe
    {
    position:absolute;
    top:-412px;
    left:-318px;
    width:1280px;
    height:1200px;
    }

  • Christie says:

    I wish I could say who cares about IE, with all the problems it puts out, but most visitors use IE. So if I want most visitors to see a working site I’ll have to work with IE somehow. Thank you, this is a great idea still!

  • Adam says:

    I used the code above which works very well, however, I am only able to control the coordinates of the page that I am inserting into the iFrame…I want to change the coordinates of where the iFrame appears on my page, because as of now it stays in the top left no matter what I change.

    Please help.

  • searching says:

    This is outdated as yahoo and other sites have blocked iframes.

    • Cyberstarweb says:

      Obviously this will only work on sites that do no have blocked frames. My previous Yahoo demo stopped working for that reason. There are other server side solutions that can scrape page content that would work on sites with blocked frames.

      But this simple css is an interesting lightweight solution to scrape page content where it’s available.

  • Subair says:

    Thank you so much for the code. Great! Works well in FF. This helped me a lot.

  • Cleaus says:

    Hi, i am having a problem with iframes. I have a tumblr blog and want to embed it into my wordpress website using iframes. I have put an anchor at the place i want the page to view from.

    This is working fine in wordpress, but the only problem is that it still scrolls up and down revealing the rest of the tumblr blog (which i dont want it to do) is there anyway of getting the iframe to not scroll but still display the content i want?

    • Cyberstarweb says:

      Not sure since I haven’t seen your page, but you could try adding overflow:hidden to either the outer or inner div style.

Leave a Reply to Cleaus Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>