This example demonstrates the use of box - structural - elements
and CSS position and dimension properties in laying out a web page.

The assignment requires that you create four boxes - you will have to use the information in this example and the skills that you have gained in this course to complete the assignment.

The system of creating a layout using the box elements is best accomplished using an external stylesheet with the xhtml web page. Your stylesheet will contain properties you may not have tried before - therefore, using your template stylesheet may not save you any work.

To start, make a copy of your validated template xhtml document; name it box-layout.html . Use the code shown in the yellow box as a guide for your work.

  1. Add a <div></div> element to box-layout.html .
  2. Add a class attribute to the <div></div> element with a class name: area00 .
  3. Add another <div></div> element inside of the first <div></div> element.
    Add a class attribute with a class named: area01 .

	 "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
		<meta http-equiv="Content-Type" 
				content="text/html; charset=iso-8859-1" />
		<title>Using Box Structures for Web Page</title>
		<link rel="stylesheet" type="text/css" href="layout.css" />
		<div class="area00">
			<div class="area01">

  1. Open a new page in the text editor. This will become your external stylesheet. Name it: layout.css .
  2. Enter the 2 rules shown in the following box:

			position:			absolute;
			left:				50px;
			top:				200px;
			width:				750px;
			height:				350px;
			border:				thin solid #ff0000;
			background-color:		#feff66; 
			position:			absolute;
			left:				20px;
			top:				20px;
			width:				350px;
			height:				100px;
			border:				thin solid #000055;
			background-color:		#ffffff;

  1. This will create a box in a box. Click here to view result.
  2. Use this informatiion to create the four box assignment.