Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

HTML Iframe Basics

By Stephen Bucaro

An iframe (imbedded frame) is a "window" or box that is imbedded in a webpage. The iframe tag uses the src attribute to designate the URL of a webpage that is to be displayed within the iframe.

The iframe element, created with the tags:
<iframe src="pageURL"></iframe> will create a default size window (about 300 pixels wide by 150 pixels high) with a border. If the src attribute referenced webpage displayed in the iframe is larger than the iframe, it will display scrollbars. The scrollbars will allow you to scroll to view the entire webpage.

The src attribute does not need to be a webpage, it can be an image, a PDF document, or any other document capable of being displayed on a webpage.

• iframes are often used to display advertising on a webpage, therefore some users will have iframes disabled in their browser. However, iframes are also used for many other purposes besides advertising so disabling them results in a cripled browser and most users will NOT have iframes disabled.

You can use the width and height attributes to set the dimmensions, in pixels, of the iframe. Alternatively, you can set width and height as percentages of the width and height of the iframe's containing element. Another commonly used attribute is frameborder which can be set to 0 to prevent display of a border, or set to 1 to always display a border.

Below is shown an iframe with the width, height, and frameborder attributes set.

<iframe width="200" height="150" frameborder="1" src="URL">
</iframe>

You can use the scrolling attribute to control the display of scrollbars. Set scrolling to "no" to prevent the display of scrollbars. In this case, if the displayed document is larger than the iframe, the user will not be able to scroll to view the entire document.

Set scrolling to "yes" to always display scrollbars. In this case, if the displayed document is smaller than the iframe, the scrollbars will be visible, but not functional. Set scrolling to "auto" to let the browser display scrollbars when necessary.

An iframe is an inline element, which means that when the browser lays out the webpage, the iframe will flow into place from left-to-right with the text, images and other inline elements. Similar to images. Like other inline elements, the bottom of the iframe will be alligned to the baseline by default. you can use the align attribute to align the iframe to the left,right,top,middle, or bottom within it's containing element.