fast/block/float/021.html

<html>
<head>
<style>
.black {
  border:10px solid black;
  margin: 1em 0;
  height:220px;
  width:700px;
}

.blue {
  float:left;
  width:1500px;
  height:100px;
  background-color: blue;
}

.green {
 float:left;
  width:1500px;
  height:100px;
  background-color: green;
}

.bluesnug {
  float:left;
  width:698px;
  height:100px;
  background-color: blue;
}

.greensnug {
 float:left;
  width:698px;
  height:100px;
  background-color: green;
}
</style>
</head>
<body >
In all of the examples, you should be able to see blue and green rectangles that spill way out of their
containing blocks.  They should be 100px tall and not overlap one another at all. They should be stacked
vertically.

<div class="black">
You should see blue and green rectangles below.<br>
<div class="blue"></div>
<div class="green"></div>
</div>

<div class="black">
You should see blue and 
<div class="blue"></div>
<div class="green"></div>
green rectangles below.
</div>

<div class="black">
<div class="blue"></div>
<div class="green"></div><br>
You should see blue and green rectangles above.
</div>


<div class="black">
<div class="blue"></div>
<div class="green"></div>
You should see blue and green rectangles above.
</div>

<div class="black">
<div class="blue"></div>
You should see blue above and green below.
<div class="green"></div>
</div>

<div class="black">
<div class="blue"></div>
You should see blue above and green below.<br>
<div class="green"></div>
</div>

The next examples should have blue and green rectangles that snugly fit without spilling out.

<div class="black">
You should see blue and green rectangles below.<br>
<div class="bluesnug"></div>
<div class="greensnug"></div>
</div>

<div class="black">
You should see blue and green rectangles below.
<div class="bluesnug"></div>
<div class="greensnug"></div>
</div>

<div class="black">
<div class="bluesnug"></div>
<div class="greensnug"></div><br>
You should see blue and green rectangles above.
</div>

<div class="black">
<div class="bluesnug"></div>
<div class="greensnug"></div>
You should see blue and green rectangles above.
</div>

<div class="black">
<div class="bluesnug"></div>
You should see blue above and green below.
<div class="greensnug"></div>
</div>

<div class="black">
<div class="bluesnug"></div>
You should see blue above and green below.<br>
<div class="greensnug"></div>
</div>


</body>
</html>