clhenrick/index.html

## index.html
<!doctype html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
 -->
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>box inside a box positioned relative</title>
    <style>
    /* CSS hasn't changed! */
        .box {
            position: relative; /* positioning our boxes relative */
            width: 200px;
            height: 200px;
        }
        #box_1 {
            background: #ee3e64;
        }
        #box_2 {
            background: #44accf;
            left: 200px; /* use the left offest property to shift the box over*/
        }
        #box_3 {
            background: #b7d84b;
        }
    </style>
</head>
<body>
    <h1>3 boxes positioned relative</h1>
    <h3>The second box has left: 200px, and it is inside of box 1</h3>
    <h3>The CSS has not changed. The second box uses it's parent, the first box, as it's coordinate reference.</h3>
    <div id="box_1" class="box">
        <div id="box_2" class="box"></div> <!-- Now we have a box inside a box -->
    </div>
    <div id="box_3" class="box"></div>
</body>
</html>
	<!doctype html>
	<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
	-->
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>box inside a box positioned relative</title>
	<style>
	/* CSS hasn't changed! */
	.box {
	position: relative; /* positioning our boxes relative */
	width: 200px;
	height: 200px;
	}
	#box_1 {
	background: #ee3e64;
	}
	#box_2 {
	background: #44accf;
	left: 200px; /* use the left offest property to shift the box over*/
	}
	#box_3 {
	background: #b7d84b;
	}
	</style>
	</head>
	<body>
	<h1>3 boxes positioned relative</h1>
	<h3>The second box has left: 200px, and it is inside of box 1</h3>
	<h3>The CSS has not changed. The second box uses it's parent, the first box, as it's coordinate reference.</h3>
	<div id="box_1" class="box">
	<div id="box_2" class="box"></div> <!-- Now we have a box inside a box -->
	</div>
	<div id="box_3" class="box"></div>
	</body>
	</html>