10.1 Frame Layouts

As explained earlier, the rows and cols attributes can be used to specify the amount of screen area each row or column will occupy. For example, for a simple vertical column layout we could have:

<html>
 <frameset cols="25%,50%,25%">
  <frame src="page-a.html">
  <frame src="page-b.html">
  <frame src="page-c.html">
 </frameset>
</html>

Here we have a HTML document with three frames defined that will bring in three separate HTML documents called page-a.html, page-b.html and page-c.html. According to the cols defined in the frameset, page-a.html will occupy 25% of the screen, page-b.html will occupy 50%, and page-c.html will occupy the remaining 25%. Click here to see the result.

Note we could have set the remaining column to use the remaining space by using the * symbol like this: cols="25%,50%,*".

For a simple horizontal row layout we could have:

<html>
 <frameset rows="25%,50%,25%">
  <frame src="page-a.html">
  <frame src="page-b.html">
  <frame src="page-c.html">
 </frameset>
</html>

Here we have used the same three HTML documents but have specified rows instead of columns. Click here to see the result.

Mixed layouts are possible too. For example:

<html>
 <frameset rows="50%,50%">
  <frame src="page-a.html">
 <frameset cols="25%,75%">
  <frame src="page-b.html">
  <frame src="page-c.html">
 </frameset>
</html>

Again the same three HTML files are being used but the first occupies 50% of the screen vertically, and the second 25% horizontally and the third 75% horizontally (and both 50% vertically). Click here to see the result.

When frames have visible borders, visitors can resize them by dragging the border. This can be prevented if necessary by adding the noresize attribute:

<html>
 <frameset cols="50%,50%">
  <frame noresize="noresize" src="page-a.html">
  <frame noresize="noresize" src="page-b.html">
 </frameset>
</html>

Click here to see the result.

Be aware that the <body> tag cannot be used together with the <frameset> tag. However, if a <noframes> tag containing some text is added for browsers that don't support frames, the text will need enclosing by <body> tags. In fact all HTML elements can go between <noframes> tags. Commonly a link is placed here to a non-frameset version of the web site:

<html>
 <frameset cols="25%,50%,25%">
  <frame src="page-a.html">
  <frame src="page-b.html">
  <frame src="page-c.html">
  <noframes>
   <body>Your browser does not handle frames...</body>
  </noframes>
 </frameset>
</html>