Here is an important point: Let's suppose that you make a frame 100 pixels wide on the left, and 100 pixels wide on the right. If you are running an 800x600 screen you make the 3rd and middle area 600 pixels wide. Everything looks just dandy... to you. For someone whose monitor is set at 640x480, those 100 pixel wide frames you put in your page are now 80 pixels wide. In other words, the browser trys to fit it in any way it can... even if it means making your page look bad. If you use ANY absolute dimensions in your <frameset> tags ALWAYS have at least one * as an elastic frame. That way everything will look good to everyone and there will be peace across the land once again.

This is the cause of a common problem with frames that I want to take the time to draw extra attention to. A popular frame layout is a narrow directory window on the left and a larger main window on the right like so. Here's the problem... If you divide up the windows using percentages (such as <frameset cols="15%,85%">) everything will probably look just dandy to you. But... to someone with a different screen resolution it might look like this.

The reason this happens is because you have specified that the left window should be 15%. 15% of what? 15% of whatever their horizontal screen resolution is. That means that that left window might look a little different to different people. How to fix you say? Glad you asked... Just use an absolute dimension for the left window and make the right window elastic (such as <frameset cols="120,*">). Bingo. Problem solved.

It's a good idea to make that absolute dimension just a wee bigger than it needs to be. Give the stuff in that left window a little breathing room. For example, if 100 pixels gives a good but snug fit... make the window 120 or 125 pixels.

It's always a fine idea to view your page at a couple different screen resolutions. If you're not sure how to change your screen resolution I've written a few instructions here.

We can have more than one leftover frame and specify a size relationship between them.

<frameset cols="50,*,2*">
  <frame src="lisa.html">
  <frame src="terri.html">
  <frame src="kim.html">
</frameset>

VIEW IT

Translated this says: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Lisa in the first frame, Terri in the second and Kim in the third.

It is important to note that everything is done in order. The first <frame> is displayed according to the first size attribute in the <frameset> tag (50/lisa) and the second with the second (*/terri) and the third with the third (2*/kim). I know that this may be mind-numbingly obvious, but it is very important and I wanted to draw extra attention to it.

What if we want to divide kim in half horizontally? Remember I said that if you want to do any dividing you must use the <frameset> tag. First we must replace Kim with a <frameset> tag pair.

<frameset cols="50,*,2*">
  <frame src="lisa.html">
  <frame src="terri.html">
  <frameset>
  </frameset>
</frameset>

At this point we have told the browser: Make 3 frames. Make the first 50 pixels wide. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2. Put Lisa in the first frame, Terri in the second and the third frame we are going to divide further. Now we have to specify how to divide up that third frame.

We were going to divide it in half horizontally.

<frameset cols="50,*,2*">
  <frame src="lisa.html">
  <frame src="terri.html">
  <frameset rows="50%,50%">
  </frameset>
</frameset>

And I think we'll put Kim back in on the top and Tina on the bottom. And that's that.

<frameset cols="50,*,2*">
  <frame src="lisa.html">
  <frame src="terri.html">
  <frameset rows="50%,50%">
    <frame src="kim.html">
    <frame src="tina.html">
  </frameset>
</frameset>

VIEW IT