How to Create an Inline Frame

Inline frames are a way to create a 'window' in your web page that is capable of displaying separate documents inside that window without reloading the entire page. It's similar to having a framed site without the complications of building framesets, and without the disadvantages framed sites have with search engines.

To the right is a simple iframe. Click the sample links below to load new files into the iframe window so you can see how it works and view additional tips.

Sample 1 | Sample 2

How It's Done

Here's the code for a basic iframe:

<iframe src="YourFile.txt" 
 style="float: right; 
 width: 260px; height: 130px; 
 margin-left: 12px; border: 1px solid black;" 
 name="#boogiejack">
Alternative Content
</iframe>

In the above example, the first line opens the "iframe" and the "src" value is the location and name of the file you wish to have loaded in the iframe when the page loads. For this page, it was a text file.
The second line floats the iframe to the right side of the space where it's being used. This allows text to flow around it. You can float it left, or remove the float property to have the iframe placed on the page naturally in the flow of content.
The third line sets the width and height of the iframe. I coded them in using CSS, but you could use the HTML attributes of width and height instead.
In the fourth line I set the left margin to create a cushion of space between the iframe and the text that flows to the left of it. If you float the iframe to the left instead of the right as I did here, then you'd change "margin-left" to "margin-right" so the cushion of space remains between the iframe and the text. I also added a border around the iframe here.
In the fifth line, the name attribute is used to target links into the iframe. The name can be most anything, but you must include the hash mark (#) before the name or the link will open in a new window in some browsers. In this example I used the name "boogiejack" because I'm so vain that Carly Simon made a hit song about me. You've probably heard it. ;o)
The line in gray text is where you place alternative content for browsers that don't support the iframe. Most do nowadays, though.
The last line closes the iframe

To load a new document into the iframe window, code the link using the target attribute and the name you give the iframe:

<a href="newpage.txt" 
 target="#boogiejack">New Page</a>

As with the iframe name, here you must also use the hash mark before the target name.

Unfortunately, not all browsers support the iframe, but over 90% do. For those browsers that don't, it's important to put alternate content in place before closing the iframe tag.

If you coded:

<iframe ...blah blah blah>
<a href="AlternativeContent.html">Your page</a>
</iframe>

...people using browsers that don't support iframes would see a link to the alternative content you want to present instead of the iframe. You can put a link, multiple links, text, or an image as the alternate content.

There you go, boss, you've been framed!

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]