Think of an Inline Frame as a regular frame. Much of what we can do with frames, we can also do with iframes...

We can set the width and height. This is probably a good thing to do for every inline frame... no sense in leaving such an important consideration to chance.

<iframe src="hello.html" width="200" height="100">
This page uses inline frames.
</iframe>

We can also specify dimensions as percentages. Specifying the width as a percentage is fairly predictable. Specifying the height as a percentage is very unpredictable.

<iframe src="hello.html" width="75%" height="100">
This page uses inline frames.
</iframe>

Always keep in mind that your viewers may be using a different screen resolution than you. 75% of someone else's browser window may be a whole lot different than 75% of yours.

Another important note... be reminded that inline frames cannot be resized by the user.

Back to a simple example...

<iframe src="hello.html" width="80" height="80">
This page uses inline frames.
</iframe>

We can make an iframe very small if we wish.

<iframe src="hello.html" width="10" height="10">
This page uses inline frames.
</iframe>

You can kill the scrollbars...

<iframe src="hello.html" width="80" height="80" scrolling="no">
This page uses inline frames.
</iframe>

Before you do this, you'd better make darn sure that the user won't need to scroll to see everything. As with regular frames, scrolling can be specified as yes, no or auto. Auto is the default.

scrolling="yes"  - always display scrollbars
scrolling="no"   - never display scrollbars
scrolling="auto" - display scrollbars only if needed (default)

You can mess with the margins around the page...

<iframe src="hello.html" width="80" height="80" marginwidth="0" marginheight="0">
This page uses inline frames.
</iframe>

You can turn the frameborder off...

<iframe src="hello.html" width="80" height="80" frameborder="0">
This page uses inline frames.
</iframe>

Use 1 for on and 0 for off. Default is usually 1... frame borders on.

You can align it to the right...

<iframe src="hello.html" width="80" height="80" align="right">
This page uses inline frames.
</iframe>

Default alignment is to the left. (Aren't you glad I'm here to point out the obvious?)

While some browsers will recognize align="center", a more reliable way to center an iframe is to simply wrap it in <center> tags...

<center>
<iframe src="hello.html" width="80" height="80">
This page uses inline frames.
</iframe>
</center>

Frames Tutor

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Frames Templates      HTML 4.0 Reference      Barebones HTML Guide