Fall Sale! Code FALL2024 takes 25% OFF our Pro Plugins & Books »
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.

About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »

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

  1. Just wanted to say thanks for this article… was just the info I was looking for!

  2. J.Nothing 2007/07/25 2:04 pm

    I wanted to say also.. thanks. I’m doing of all things… a myspace div overlay for someone, and the question of how to implement iframes cleanly and efficiently cropped up. This helped a ton.
    Thanks!

  3. Perishable 2007/07/25 2:21 pm

    Thank you for the kind words — it is always great to get positive feedback!

  4. Thanks really needed this

  5. My pleasure!

  6. Thank you so much,been searching for a week on codes and random things. Now finaly one works.
    This is such a god sent.

  7. Perishable 2007/10/09 6:09 am

    Glad to be of service, Nat!

  8. I found another way to embed an external document without using iframes. I really do not like them: try this:

    In CSS:

    /*Changes divs to work as frames*/
    .frame {
         overflow: auto; /* allows the div block to be scrollable */
         font-size: 14px;
         border:0px;
         margin:0px;
         padding:0px;
    }

    In HTML:

    <a href="index.html" rel="nofollow">now...</a>
    <!-- ... -->

  9. Perishable 2007/12/17 8:37 am

    Dwayne, this looks interesting, however, I think some of the code left in your comment got munged by WordPress.. would you be so kind as to re-comment using <code> tags to wrap each line of example markup? — Thanks :)

  10. I was about ready to give up until I found this tip. Thanks. Unfortunately though, I’m still having trouble getting it to work when the iframe contains a flash movie. I got it working in Safari but the clip seems to be ignored in Firefox when it’s a flash movie. If I switch the src of the iframe to yahoo it works just fine. Any ideas?

  11. I was wondering if we could show only a part of the external webpage (lets say bottom part) in the IFrame ?

  12. Perishable 2008/01/15 7:40 am

    Hi Ligon,

    Yes, I am sure it would be possible (although I have never done it), however, you may need to call upon the ancient powers of absolute positioning via CSS for the external page in order to accomplish such a task.. Good luck!

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 »
Digging Into WordPress: Take your WordPress skills to the next level.
Thoughts
I disabled AI in Google search results. It was making me lazy.
Went out walking today and soaked up some sunshine. It felt good.
I have an original box/packaging for 2010 iMac if anyone wants it free let me know.
Always ask AI to cite its sources. Also: “The Web” is not a valid answer.
All free plugins updated and ready for WP 6.6 dropping next week. Pro plugin updates in the works also complete :)
99% of video thumbnail/previews are pure cringe. Goofy faces = Clickbait.
RIP ICQ
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.