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

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 this article

This is article #273, posted by Perishable on Tuesday, January 02, 2007 @ 05:12pm. Categorized as Structure, and tagged with frames, html, markup, notes, tips, tricks, xhtml. Updated on November 05, 2007. Visited 24453 times. 17 Responses »

Bookmark • Trackback • Comment • Subscribe • Explore

« Monzilla Media Website Release • Up • Path to Outlook Express Files on WinXP »

17 Responses

1 • June 11, 2007 at 11:49 am — Jason says:

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

2 • July 25, 2007 at 2:04 pm — J.Nothing says:

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 • July 25, 2007 at 2:21 pm — Perishable says:

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

4 • August 28, 2007 at 9:57 pm — John says:

Thanks really needed this

5 • August 28, 2007 at 10:43 pm — Perishable says:

My pleasure!

6 • October 9, 2007 at 2:15 am — Nat says:

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 • October 9, 2007 at 6:09 am — Perishable says:

Glad to be of service, Nat!

8 • December 17, 2007 at 8:25 am — Dwayne says:

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 • December 17, 2007 at 8:37 am — Perishable says:

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 • January 2, 2008 at 1:08 pm — lance says:

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 • January 14, 2008 at 11:04 pm — Ligon says:

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

12 • January 15, 2008 at 7:40 am — Perishable says:

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!

13 • February 28, 2008 at 4:33 am — Sander says:

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…

14 • February 28, 2008 at 5:52 pm — JustinRyan says:

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 http://www.theblueroses.com 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?

15 • March 2, 2008 at 9:23 am — Perishable says:

@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.

16 • March 20, 2008 at 4:58 am — webfound says:

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.

17 • March 22, 2008 at 5:49 pm — Perishable says:

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!

Drop a comment

Google Page Rank updates during the next few days according to Matt Cutts

Perishable Press