The use of iframes is an ongoing controversy. Are they good? Are they bad? I can honestly say I’m unbiased on this. I feel that iframes aren’t necessarily bad, but that there are alternatives that allow for better accessibility and greater search engine optimization. This is a mini-tutorial (hardly any work at all) dealing with CSS and XHTML which will allow you to create the same effect that comes with the standard iframe.

To start off, all you’ll need to create your ‘iframe’ is a DIV layer, and a cascading stylesheet linked to the source (optional).

Step 1: Create your div.

<div>Paragraph or two of text here....</div>

Step 2: Add the styles to the div.
This is fairly simple. If you don’t have a stylesheet linked to the source, or have a style section in the head at the top of your source, you can simply add the following attribute to the div element.

<div style="overflow:auto; width:200px; height:200px;">Paragraph or two of text here....</div>

If you’re using a linked stylesheet or have one in the head at the top of your source, define the div with the following (NOTE: I am using the div class ‘iframecopy’ with this example so you’ll have to add class=”iframecopy” to the div attribute for it to work.):

div.iframecopy {
width: 200px;
height: 200px;
overflow: auto;
}

That’s it! What you typed simply says that once the text reaches a height of 200px, the famous iframe scrollbar will appear, allowing the div to stay at the specified height and still contain more text than that which it would ordinarily allow.

There you have it! An iframe copy, using a single div and a little bit of CSS, without the mess of unecessary attributes that are needed to make the iframe practical.

If you want to go even further with this, you can use PHP ‘includes’ to get the ‘target’ feature that comes with iframes and links used together. I hope this opens your horizons a bit, while still allowing the functionality of the recognized iframe. Happy coding!