Monthly Archives: June 2010

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>