How to Size a Web Page to Display With an iFrame

iFrames allow you to display other documents or Web pages on your own page.

iFrames, or inline frames, are HTML tags that contain another document within them. This other document is usually pulled from another source either elsewhere on your site or somewhere on the Web. A number of types of iFrames exist, including static iFrames and scrolling iFrames. An iFrame usually contains both a width and a height so that you can make adjustments to its size and fit it in your Web page without having to modify your page.

Instructions

1. Download the Web page that you want to display with an iFrame with your FTP client software. This can be Dreamweaver, Filezilla, Internet Explorer or another FTP client software.

2. Open the page in your code editing software; Notepad will suffice.

3. Locate the main content area. This will usually be the largest area below your header or navigation sections at the top. It will frequently be accompanied by a smaller content area called a sidebar. Look to see what the width of your main content area is. It should be labeled "Width" and a number followed by "px" for pixels. You might have to download your style sheet and check it depending on your site.

4. Copy the iFrame code from its original source. You can highlight it all and either press "Control" and "C" on your keyboard, or right-click it and select "Copy."

5. Paste the iFrame code in your main content area by either pressing "Control" and "V" on your keyboard, or right-click it and select "Paste."

6. Locate the width of the iFrame within its code. It will be called "Width." Change this value to a number smaller than the width of your main content area or to 100 percent if you want it to take up the entire width of your main content area.

7. Divide the iFrame width you entered by the width of your main content area; divide your iFrame height by the answer, and enter the result as the new iFrame height. This will maintain your iFrame proportions.

8. Save your document, and upload it to your website with your FTP client software. Double-check the page in a browser to ensure it displays properly.

Tips & Warnings

• Eliminate sidebars is desired so that your iFrame can utilize your entire content area.

• If you are using Dreamweaver, use the preview mode to see your changes in a browser before uploading changes to your website.

• Make sure your new settings are what you want before uploading your saved document, or your page might not work or display correctly.

References

• W3Schools.com: HTML <iframe> Tag
• Sami's Site: iFrame Tutorial