Plugin Sale! Save 15% on pro plugins with discount code: NEWYEAR2021
Web Dev + WordPress + Security

Embed External Content via iframe and div

By using an <iframe> within a <div>, it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular. Indeed, with CSS, the placement, sizing, and styling of div’s provides endless possibilities for embedding external or even internal web content into pages that would otherwise require the use of frames, Flash, or JavaScript. This method works on any modern browser, as well as any old browser that understands both <div> and <iframe> tags.


Simply add the following code to your document and style according to your specific needs:

<div style="position:absolute; left:77; top:77; width:377; height:377; clip:rect(0,381,381,0); background:#FFF;">

 <iframe src="" width="377" height="377" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:2px; border-color:#333; background:#FFF; border-style:solid;">


Commented version

Here is the code again, this time commented with explanatory information:

<div style="
   clip: rect(0,381,381,0); // right-clip equal to div width plus total border width
                            // bottom-clip equal to div height plus total border height
   position:absolute;       // used for positioning and may or may not be required
   background: #FFF;        // background color of div may or may not be seen
   height: 377;             // height of window (div) that contains the iframe content
   width: 377;              // width of window (div) that contains the iframe content
   left: 77;                // absolute position of window (div) from the left edge of browser
   top: 77;                 // absolute position of window (div) from the top edge of browser

   src="" // location of external resource 
   width="377"              // width of iframe should match the width of containing div
   height="377"             // height of iframe should match the height of containing div
   marginwidth="0"          // width of iframe margin
   marginheight="0"         // height of iframe margin   
   frameborder="no"         // frame border preference
   scrolling="yes"          // instructs iframe to scroll overflow content
      border-style: solid;  // border style
      border-color: #333;   // border color
      border-width: 2px;    // border width
      background: #FFF;     // background color


Please note that many of the tag attributes (e.g., position, width, height, etc.) may be removed the (X)HTML markup and included externally by adding the appropriate id hooks (e.g., id="division" and id="iframe") and styling via an external CSS document.

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
.htaccess made easy: Improve site performance and security.

26 responses to “Embed External Content via iframe and div”

  1. Lance:
    I’m running in exactly the same problem. And guess what… we’re not alone!
    If you set the ‘wmode’ property of your flash object to ‘transparent’ the problem seems to be solved. But the truth is even less satisfying. If you right click your flash document (to get the context menu) you’ll see it is totally out of place. Mouse clicks are not captured correctly so buttons (and other input elements) won’t work.

    The combination: Div (with position:abosolute) -> Iframe -> Flash Document. simply won’t work in FireFox … for as far as i know…

  2. JustinRyan 2008/02/28 5:52 pm

    I am stuck. I am new to css recently and wnat to learn it but I have a site I still want to use an IFRAME in because I don’t have the knowledge yet to make it work without 1. So to start off with my site redesign I am going with an IFRAME.

    If you look at my site you will see a css trick I obtained from another site and I love this overlapping images look. The css code allowed for scrollable contant. The problem is I like the ability to target the frame also. So i put an IFRAME in the DIV. it works but leaves a space on the bottom and the left side. Can you help me? Where am I am going wrong? I have tried using auto for the size of the iframe as well as 100% and a couple others. what do you think?

  3. Jeff Starr
    Perishable 2008/03/02 9:23 am

    @JustinRyan: Many times, layout issues involving frames, iframes, and scrollable divs require manipulation of padding and/or margin properties for the framing element/page and/or the framed element/page. It generally takes awhile to tweak things, but eventually everything should gel.

  4. hello

    do you know a trick for positioning the framed content? in a case I want to hide the left and right columns of the page inside the frame, so only the center content would remain. Is this possible? thanks.

  5. Jeff Starr
    Perishable 2008/03/22 5:49 pm

    The best advice I can give concerning positioning the framed content is to style the target page directly, as if there were no frames present. Once you have the design you would like to frame, reference it via the iframe and fine-tune as necessary. I hope that helps!

  6. i have div containging iframe(shoppingcart). now i want to expand div downward as ….my iframe height grow…is this possible? please help me

  7. Jeff Starr

    Hi Ali, I have tried doing this on a project once.. I think I ended up solving the issue with a little JavaScript. Unfortunately, I no longer have access to the code.

  8. bee happy! 2008/12/26 1:55 pm

    Thanks for this code. This is really helpful!

  9. Jeff Starr

    My pleasure! Glad to be of service :)

  10. Hey it is true but how can we take a div or table from a site or html

  11. Hi,

    Nice post. I have main concern about showing an external site in an iframe. Is it ok to show like this legally as I am planning to show the external site in a pseudopop-up instead of iframe. Pelase let me know if this is ok to show other sites on our site via iframe/popup.


  12. Jeff Starr

    @webdev: It all depends on the context, how you are using the content, and so forth. Unless the site is something like Google, your safest move would be to contact the owner of the site directly and obtain written permission. Otherwise, you just never know what could happen.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
BBQ Pro: The fastest firewall to protect your WordPress.
Find out if a plugin works with the latest version of WordPress @
Going through all of my data, deleting all the chaff. Going for less than 500 GB total data storage.
Finally deleted all the cool unused placeholder Twitter accounts that I signed up for years ago. I will never use them.
After several years with Dashlane, I've moved on to a simpler, better solution.
After 10+ years, finally moved the last of my sites away from Media Temple.
MUCH work to be done.
Watching. Waiting. Praying.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.