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 . 

<!DOCTYPE html PUBLIC
	 "-//W3C//DTD XHTML 1.0 Strict//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	
		<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" />
		
	</head>
	
	<body>
	
		<div class="area00">
	
			<div class="area01">
		
		
			</div>
		
		</div>
		
	</body>
</html>

  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: 

	.area00
		{
			position:			absolute;
			left:				50px;
			top:				200px;
			width:				750px;
			height:				350px;
			border:				thin solid #ff0000;
			background-color:		#feff66; 
		}
		
	.area01
		{
			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.

BACK