positioning content of an iframe within a containing div

Question

I've got a page which I need to serve via an iframe, but I need to only display part of the page, not the whole thing.

My current code is:

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

I thought that the best option would be to serve the iframe within a containing div that has "overflow:hidden" so that it acts like a picture frame. That works, but the problem is that the content I want to show is in the middle of the iframe page and the div is always assuming that 0,0 is the start of the frame. I need to position the iframe so that the div is exactly over the part of the page I want to be visible.

Can I do this?

Answer 1

Use negative values for margin-top and margin-left to position the iframe. Look at the code below:

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

Answer 2

In the content to appear within the iframe, if you can set an element with an id that marks the very top of the portion of content you want to peak through, then you can set the iframe's src attribute with that anchor on the url

iframe content's HTML:

[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>

[more markup]

iframe tag:

<iframe height="350px" scrolling="no" 
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea" 
width="500px"></iframe>

UPDATE -- BETTER APPROACH:

Or you can just use absolute positioning on the iframe within the div. You'll need the iframe's height and width to be wider and taller in than the window you're fitting it in to accomodate the offsets.

See this example: http://jsfiddle.net/sNSMw/