The cols attribute for the frameset element gives you three value options:
-
Numeric value in pixels, such as cols="200". This results in a 200-pixel column.
-
Percentage value, such as cols="75%". A percentage value results in the column being 75% of the available browser space.
-
Dynamic value, represented by an asterisk, as in cols="*". This means that the column will dynamically resize to the available browser space.
Example 6-4 shows a frameset document used to create the two-column look we're after.
You'll note that I've also added frame elements.
To create a frame page, you need to have each column (or row, as you'll see in the next section) filled with a corresponding conventional HTML page. For these examples, I've created two very simple pages just for demonstration purposes, available for your use. You would, of course, add real content to these pages.
Example 6-4. Creating a two-column frame page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frameset Document</title>
</head>
<frameset cols="200, *">
<frame src="lightgray.html" />
<frame src="darkgray.html" />
</frameset>
</html>
This results in the left, light-gray column being fixed at 200 pixels and the right, dark-gray column being dynamic (see Figure 6-2).
Figure 6-2. The left column is fixed at 200 pixels, whereas the right column will dynamically resize along with the browser.
Of course, you can have multiple columnsas many as you want. Just add more comma-separated values (and more frame elements to correspond). What's more, nothing says you can't mix and match the column values. Consider Example 6-5, which provides four total columns (see Figure 6-3).
Example 6-5. Frame page with four columns
<frameset cols="25%, *, 100, 25%"> <frame src="lightgray.html" /> <frame src="darkgray.html" /> <frame src="lightgray.html" /> <frame src="darkgray.html" /> </frameset>
Figure 6-3. A four-column frame page; the far left and right columns will take up 25% of the browser space, the left center column is dynamic, and the right center is fixed at 100 pixels.
