New Bookstore! Save 20% on books with discount code: LAUNCH
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.

Plug-&-play

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="http://www.google.com/" width="377" height="377" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:2px; border-color:#333; background:#FFF; border-style:solid;">
 </iframe>

</div>

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
">

<iframe 
   src="http://google.com/" // 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
   style="
      border-style: solid;  // border style
      border-color: #333;   // border color
      border-width: 2px;    // border width
      background: #FFF;     // background color
">
</iframe>

</div>

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.
GA Pro: Add Google Analytics to WordPress like a pro.

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

  1. Hi,

    This looks like a thread I need, but want to do a mixture of iframe and normal frame “look”.
    In other words I need to add an external guestbook within a template layout inside a DIV(still with me?). I currently use real frames and load the guestbook as a framepage, but the new DIV layout produces 2 scrollers (one in the iframe and one for the page).

    Is there a way to simlaute the real frames method within the webtemplate using DIV/iframe?

    Thanks,
    Kev

  2. I am hoping that someone can help me. I am using a fieldset menu and would like to target an iframe in an external page, so that when the user navigates to that page, the iframe will be different depending on which option was chosen. Can that be done? I am guessing I need a bit of javascript. Any ideas would be great. Thank you.

Comments are closed for this post. Something to add? Let me know.
Welcome
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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
LOL @ “weekly” support: “Your request has been received and will be reviewed soon. Neil (your support guy) checks support requests weekly. Rest assured we’ll get to it!” — Gotta be kidding with this.
After several days of work, finally taking a break. If anyone needs me, I'll be in Zora’s Domain, working thru Mah Eliya shrine.
Never ever call the client a useless idiot. Even if it’s true.
Inevitable that Google shuts down Feedburner. Maybe this year? Who knows. Here is a nice summary plus alternatives.
There is no way that Marvel can serve up anything better than what they've already done with Infinity saga/Endgame. Knowhere to go but down, sadly.
I built a new search launchpad to make my life easier. So I can search multiple engines quickly and easily.
Updating all muh plugins for WP 5.5 imminent release! Wut August :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.