michael tighe

Alternative to iFrames Example:



Content as normal in here. You can put images if you really want.

By defining a specific area through CSS and then using the CSS element 'overflow' you can very easily create an iFrame alternative which is web standards and search engine friendly.

You could even use some PHP (or equivalent language) and include other data.

The Alternative to iFrames Article:

After reading various articles about avoiding iFrames, and the disadvantages to iFrame content in SEO, I thought I would demonstrate a fairly simple work-around to the iFrame that would read just like normal content to search engines.

Note that this work-around is designed for constricting content within a defined space on a page. It is achieved through some basic XHTML and CSS. If you want to see what it would look like, check out my example:

So lets jump in.

First, you need a DIV placed around the content you want contained in a frame. I’m going to give the DIV an ID of "iframe". Then, place your content as you normally would in that DIV (as seen below):

		<div id="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 your document as an inline style (bad).

We’re going to style the ID we created, called 'iframe', to include the following properties:

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

The 'overflow:auto;' above is the key. Looking at my example (using the same code above), you will get a scrollable frame on your page.

The sky is the limit from here, you can add a border, background color, images, or even get creative using PHP includes.

Content as normal in here. You can put images if you really want.

By defining a specific area through CSS and then using the CSS element 'overflow' you can very easily create an iFrame alternative which is web standards and search engine friendly.

You could even use some PHP (or equivalent language) and include other data.