We use the FRAMESET element to divide the main user window into rectangular spaces called frames.
We set the ROWS attribute to define how many horizontal spaces, or rows, we want; and we set the COLS attribute to define how many vertical spaces, or columns, we want in a frameset. Both attributes may be set simultaneously to create a grid.
<frameset rows="frame1 size, frame2 size, etc."
cols="frame1 size, frame2 size, etc.">
... frame definitions ...
</frameset>
We specify the size of each frame as a list separated by commas, which can be in pixels, percentages, or in relative length units.
Frames are created from top-to-bottom for rows, and from left-to-right for columns.
To set the size and number of rows in a frameset, we write:
<frameset rows="20%,80%">
... frame definitions ...
</frameset>
which would split the screen into two rows: a top row using 20% of available space, and a bottom row using 80% of the space.
The browser calculates the space proportionate to a user’s display setting, minus whatever space the system allots for menus and toolbars, status bars, etc.
Assuming a display resolution of 800x600 pixels, this means the screen will be split into a top frame about 120 pixels high, and a bottom frame about 480 pixels high. Since no COLS attribute is set, each row extends the entire width of the screen, or about 800 pixels.
To set the size and number of columns in a frameset, we write:
<frameset cols="200,*">
... frame definitions ...
</frameset>
which would split the screen into two columns: the first having a fixed width of 200 pixels, useful, for instance, in providing links on the left side of the main user window.
The asterisk (*) specified as a value for the second column means all, or tells the browser to take up the rest of available space for the second column. Since no ROWS attribute is set, each column extends the entire length of the page.
Rows and columns may be set simultaneously to create a grid, though in practice is of no real use. The example is just to show how it is done. To create a 2x3 grid — 2 columns by 3 rows, or six frames:
<frameset cols="50%,50%" rows="33%,33%,33%">
... the rest of the definition ...
</frameset>
Absolute lengths that do not sum to 100% of the real available space is adjusted by the browser. When underspecified, remaining space is allotted proportionally to each view. When overspecified, each view is reduced according to its specified proportion of the total space.
Framesets may be nested to any level.
In the next example, the first or outer FRAMESET divides the browser window into two columns. The next or inner FRAMESET then divides the second column into two rows.
<frameset cols="20%,*">
... frame definition for column 1 ...
<frameset rows="15%,*">
... frame definition for column 2, row 1 ...
... frame definition for column 2, row 2 ...
</frameset>
</frameset>
NOTE: Elements that may normally be placed in the BODY element must not appear before the first <frameset> element, or the FRAMESET will be ignored.