Multiple Frames

You're not stuck with just using a couple of frames. You can use as many frames as you'd like. Take a look at this page or this one.

When coding multiple frames there are a couple of things to keep in mind. First, you must size your frames with COLS or ROWS in the <frameset> tag. These dimensions are listed in order of either left-to-right (for columns) or top-to-bottom (for rows). Just separate each frame's dimension with a comma (,). Remember that the dimensions go in quotes.

Secondly, when coding the <frame>s, the first frame coded will be the leftmost frame (for columns) or topmost frame (for rows). Just keep the left-to-right and top-to-bottom idea in mind.

Lets code a three frames columnar page. We'll make the left column 100 pixels wide and split the rest of the width of the screen evenly between the two other frames.

<frameset cols="100,*,*">

The "100" makes our leftmost frame 100 pixels wide. Using an asterisk for the remaining two frames will split the remaining screen space evenly between the last two frames.

Now lets size some rows to where the top and bottom rows are a narrow 50 pixels and the main row in the center is sized to the remaining screen space.

<frameset rows="50,*,50>

Remember that the sizes are coded from top to bottom. The first frame on top is sized to 50 pixels tall. The next frame will take up the remainder of the screen after the other frames are sized. The third frame will be 50 pixels tall and placed at the bottom of the screen.

Using Percentages

When coding multiple frames we can use percentages, too:

<frameset cols="20%,40%,40%">

Note that frame sizes are independent of the size of the page loaded in them. When rows are sized with percentages, it refers to a percentage of the height of the browser's screen, not any particular content page.

This is radically different than using percentages in <table> rows or heights because the <table> is sized relative to the overall page. Frame rows are sized relative to the browser's window size, not a page's size.

Asterisks

Using asterisks (*) is a handy method to proportionately size frames for all video resolutions. This doesn't quite work like percentages, but the overall effect is similar. A frame sized with an asterisk uses unassigned screen space to determine its dimensions. This is the space left over from the frames that are sized with pixels or percentages.

If you coded four columns with asterisks -- cols="*,*,*,*" -- you'd end up with the frames being equally sized -- one-fourth of the total screen space each. The total screen space would be divided evenly among them.

Now lets look at a different use of asterisks. Say we want the last frame to be twice as wide as the other two:

<frameset cols="*,*,*2*">

Notice that the last row is sized to "2*". That "2" tells the browser to assign that column twice the space as the others. Now the rows would be sized to 20%,20%,20%,40% respectively. All of the columns are resized to accommodate the double-sized frame.

This can get a little confusing. Take this example:

<frameset cols="*,2*,3*,4*">

For starters, you'd rarely see something like this in practice. But the browser will render this accurately at any resolution. I like to use percentages to figure out a mess like this.

What we've got is a total of ten asterisks: 2,3,4, and the original one. This means each asterisk is work 10% of the screen width. The first frame would be 10% of the screen wide. The second frame would be 20%; third, 30%; and fourth, 40%.

All you need to do to figure these framesets out is to add up the asterisks and figure out the percentage each single asterisk is worth and then use the multiples to figure the final sizes.

Generally, using numbers with asterisks is used when only two or three frames need to split up the screen space in a particular proportion.

Summary & Exercises

You can make as many frames on a page as you'd like. Just add dimensions for each frame in the <frameset>'s ROWS or COLS attributes, and make sure to make a <frame> for each.

You can size frames using pixels, percentages, or asterisks (*). Frames using percentages and asterisks are sized relative to the browser's window size, not the content pages loaded into them.

An asterisk divides any unassigned screen space among the frames sized using an asterisk. You can use a "multiple", or a number in front of an asterisk, to proportionately size frames.

Make this page. Next, make this one.

To Next Advanced HTML Lesson

Back To Advanced HTML Index