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.
via Embed External Content via iframe and div • Perishable Press.
