iFrame: How to show specific part of a webpage using iframe

Someone ask me “how can i display a specific area of a website using iframe ?” So today I’m going to show a way to display specific area/portion of a webpage using iframe tag. Iframing an external webpage is not so tough. We just need a little knowledge about basic HTML and CSS to do that.
The <iframe> tag specifies a floating inline frame, used to embed external content in a webpage. Using ifrmae easily we could display an external webpage including text, images, and videos etc. But here we're going to see "how to display a specific part of a website using <iframe>"

Why do we need to iframe a specific area of a website?

Sometimes if we want to show certain part of an external webpage in our site/blog; iframing is the best easy way to do so.

Follow the instruction below to display a specific area of a webpage using iFrame & CSS

To do that just copy the code below and paste it wherever you want display.
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;"> <iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;"> </iframe> </div>
Note: Replace the URL with yours. And to achieve your deserving result change the value of max-width, margin-left, height, margin-top, width.
This is as an example of iframing a site’s specific area. as an example here I iframed some part of a page from www.w3schools.com.

Subscribe To Get Update In Your Email


  1. Howdy! I could have sworn I've been to this website before but after browsing through some of the post I realized it's new to me. Nonetheless, I'm definitely happy I found it and I'll be book-marking and checking back frequently!

  2. I really like your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz answer back as I'm looking to construct my own blog and would like to know where u got this from.

    1. Thanks for commenting. I did all these stuff by myself here.

  3. Thank you for this, after some tweaking with the positions and size it turned out to be exactly what I was looking for!

  4. Hi! First of all, thank you for the trick! I've been searching for it for a while... But what I'd like to ask you is: How can I make it so that the background of the embedded page is shown? Thanks!

  5. hello,
    nice post sir, I have on query. can i display the resulting page after the click in the same iframe?

  6. Hi, I am sorry to say that its not working for all sites. Is there any way out for displaying some portion of aspx webpage that is showing some data on regualr interval basis ?

  7. wow this actually works, didn' even think this was possible, thank you!

  8. awesome... this truelly what i looking for... thanks a lot for this iframe sciprt. very useful for me :D

  9. it`s not working in Firefox 27.0.1 for me. In IE works fine.

  10. Awesome! Worked perfect for me.

  11. Hey! I am very pleased to say that Its working for me as well, but there is some problem I am facing right now, I am using this technique and generating dynamic iframes with dynamic content, the header of every page is hidden which is okay, but I have variable height of content like some of them are of 400px height and some divs are 1000px. In second case It works fine but in first case when i hide the page header It merges first slides content with second and a weird slide comes before my eyes which is not good, any suggestion about it please let me know on sohaib_ameen89@yahoo.com, I shall be very thankful to you.