pdxwolfy/floats.html

## floats.html
<!doctype html>
<html lang="en-US">
  <head>
    <title>javascript</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="assert.js"></script>
    <style>
      #first, #second, .left, .right {
        border: 1px solid black;
      }

      #first, #second {
        overflow: hidden;
      }

      .left {
        background: yellow;
        float: left;
        width: 45%;
        height: 100px;
      }

      .right {
        background: cyan;
        float: right;
        width: 45%;
        height: 200px;
      }

      #first p {
        clear: left;
      }

      #second p {
        clear: right;
      }
    </style>
  </head>
  <body>
    <div id="first">
      <div class="left"></div>
      <div class="right"></div>
      <p>Cleared text</p>
    </div>

    <div id="second">
      <div class="left"></div>
      <div class="right"></div>
      <p>Cleared text</p>
    </div>
  </body>
</html>
	<!doctype html>
	<html lang="en-US">
	<head>
	<title>javascript</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="assert.js"></script>
	<style>
	#first, #second, .left, .right {
	border: 1px solid black;
	}

	#first, #second {
	overflow: hidden;
	}

	.left {
	background: yellow;
	float: left;
	width: 45%;
	height: 100px;
	}

	.right {
	background: cyan;
	float: right;
	width: 45%;
	height: 200px;
	}

	#first p {
	clear: left;
	}

	#second p {
	clear: right;
	}
	</style>
	</head>
	<body>
	<div id="first">
	<div class="left"></div>
	<div class="right"></div>
	<p>Cleared text</p>
	</div>

	<div id="second">
	<div class="left"></div>
	<div class="right"></div>
	<p>Cleared text</p>
	</div>
	</body>
	</html>