iframe showing only a particular part

Question

I am working on iframes, and I need to show only a particular portion of the page.

I want to display only this part of the blog.

http://s17.postimg.org/ickav5d33/pic.png

This is the actual page of the blog.

This is my code:

<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;"> 
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;"> 
</iframe> 
</div>

Here is a Fiddle

How can I achieve this?

Solution

It seems like you just need to tweak your inline CSS a bit. For example:

<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; width: 675px;"> 
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: 13px; height: 954px; margin-top: -422px; width: 660px;"> 
</iframe> 
</div>

This appears to match the picture you provided.

I changed the margin-left, margin-top, and width of the iframe. I also changed the div's max-width to a simple width with a different value.

I figured the values for all these using Firebug. I highly recommend familiarizing yourself with browser developer tools such as that (all modern browsers include some kind of "developer tools" these days) that let you play with these things "live" until you find the tweaked CSS you like.

JSFiddle: http://jsfiddle.net/cnmteg76/2/