clhenrick/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Floats Demo</title>
  <style type="text/css">
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    text-align: center;
    /*float: right;*/
    float: left;
  }
  .box p {
    position: relative;
    font-weight: bold;
    top: 40%;
  }
  .box1 {
    background-color: red;
  }
  .box2 {
    background-color: blue;
  }
  .box3 {
    background-color: orange;
  }
  .box4 {
    background-color: purple;
  }
  </style>
</head>
<body>
  <h1> Open the web-inspector and turn the float properties in the "box" class on/off to see how they affect the elements here.</h1>
  <div class="box box1">
    <p>box 1</p>
  </div>
  <div class="box box2">
    <p>box 2</p>
  </div>
  <div class="box box3">
    <p>box 3</p>
  </div>
  <div class="box box4">
    <p>box 4</p>
  </div>

  </div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>CSS Floats Demo</title>
	<style type="text/css">
	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	.box {
	width: 200px;
	height: 200px;
	border: 1px solid black;
	text-align: center;
	/float: right;/
	float: left;
	}
	.box p {
	position: relative;
	font-weight: bold;
	top: 40%;
	}
	.box1 {
	background-color: red;
	}
	.box2 {
	background-color: blue;
	}
	.box3 {
	background-color: orange;
	}
	.box4 {
	background-color: purple;
	}
	</style>
	</head>
	<body>
	<h1> Open the web-inspector and turn the float properties in the "box" class on/off to see how they affect the elements here.</h1>
	<div class="box box1">
	<p>box 1</p>
	</div>
	<div class="box box2">
	<p>box 2</p>
	</div>
	<div class="box box3">
	<p>box 3</p>
	</div>
	<div class="box box4">
	<p>box 4</p>
	</div>

	</div>
	</body>
	</html>