Frames in Columns

Frames allow you to split the page into a number of rectangular regions and to display a separate document in each rectangle. Each of those rectangular regions is called frame. Frames are quite common because they are one of the few ways to keep part of the page stationary while other parts change. Frames are usually used to have a static navigation bar on one side of your webpage at all times. Below is an example of frame as displayed in Mozilla Firefox.

Below are the set of codes used to create the above page.

The Frameset file

<html>
<head>
<title>Frameset</title>
</head>
<frameset cols="30%,70%">
<frame src="frame1.html">
<frame src="frame2.html">
<noframes>Your browser does not support frames.
<a href="noframe.html">Click here to see this webpage 
without frames</a>
</noframes>
</frameset>
</html>

The frameset file is the file where you point your browser to. The frameset file uses <frameset> and <frame> tags.

The frame1.html code

<html>
<head>
<title>Frame 1</title>
</head>

<body>
This is Frame 1.
</body>
</html>

This is the file to be displayed on the left frame.

The frame2.html code

<html>
<head>
<title>Frame 1</title>
</head>

<body>
This is Frame 2.
</body>
</html>

This is the file to be displayed on the right frame.

Frames illustrated

About the code:

<html>
<head>
<title>Frameset</title>
</head>
<frameset cols="30%,70%">
<frame src="frame1.html">
<frame src="frame2.html">
<noframes>Your browser does not support frames.
<a href="noframe.html">Click here to see this 
webpage without frames</a>
</noframes>
</frameset>
</html>

The <frameset> is used to define a set of frames that will make up the browser window. You should end the frameset element with the closing frameset tag, </frameset>.
The attribute cols=”values” is used to divide your page into as many columns as you want. In our example, the left column takes 30% of the entire browser screen while the right column takes 70% of the browser screen. Column frames are generated from left to right. The values are put as either in pixels, percentages of the screen width or as a relative size (*). As a relative size, it would be cols="30%,*". The "*" means whatsoever percent is left.
The <frame> tag represents what goes into the frame. The src attribute specifies the source file to be displayed in the frame. Since each frame designates a webpage, you can do whatever is permitted with webpages such as inserting images, links, tables, lists etc.
The <noframes> tag is necessary to deal with the browsers that do not support frames. Hence, whatever is written in between the <noframes> and </noframes> tags will be the one displayed by the browser.