iFrames are evil. If you must, try this alternative.

The (really simple) alternative to iFrames

I wrote an article on my personal site some time ago and it has gotten consistent traffic over the past 8 months. So I thought I’d expand upon that original article and put my developer hat on for a little while.

Why are iFrames bad?

• They are not web standards compliant.
• Content in the iFrame will be treated as a separate page by the search engines.
• iFrames don’t work in all browsers.
• iFrames are hard to style, my alternative is easier.

Now I really don’t want to get into a ‘web standards’ debate with anyone. I find that using XHTML and CSS to create web sites, and generally conforming to the standards, to be the best way for me to make web sites.

So what is an iFrame Alternative?

The alternative iFrame does not use the “iframe” tag what so ever, instead we are using simple CSS to create a ‘scrolling div’ – making it standards compliant. How does it work? Read on:

First, you need a DIV placed around the content you want contained in the iframe/scrolling div. I’m going to give the DIV a class of “iframe”. Then, place your content as you normally would in that DIV (as seen below):

<div class="iframe">
<p>Here is some content.</p>
</div>

Next up is the CSS. You can either put this in your CSS file (good), or place it in the actual HTML document as an inline style (bad).

In our CSS file we’re going to style the class we created, called ‘iframe’, to include the following CSS properties:

.iframe {
width: 400px;
height: 100px;
overflow: auto;
}

The ‘overflow:auto;’ element above is the key. It is what will add the scroll bars to the div with a constrained width and height.

The sky is the limit from here, some things you can also do include:

• Add borders.
• Background colors and images.
• PHP Includes.
• Position the scrolling div anywhere on the page using CSS.
• Add javascript effects, such as an open/close box.

Example of the alternative iFrame or ‘scrolling div’