D3 Examples - mfa dt bootcamp web class: Floats demo 1

xxxxxxxxxx
 
<!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>
    