﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>CSS 2.1 Test Suite: float</title>
  <style type="text/css">
   p { margin: 0; padding: 0; text-align: justify;}
   .eight {float: left; width: 25%; color: white;
           background: navy url(support/square-purple.png) top right no-repeat;
           padding: 0; margin: 0}
   .nine {float: right; width: 50%;
          background-color: teal; color: aqua;
          padding: 0; margin: 0}
   span { color: navy; }
  </style>
  <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats">
  <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
 </head>
 <body>
  <div style="width: 75%" class="eight">
   <div style="margin-right: 17px" class="nine">
    <p>
     To the right of this teal box there should be a purple square,
     tightly squeezed in between the edge of the teal box and the
     outside edge of the blue block. ⇨
    </p>
   </div>
   <p>
    Inside this blue block on the right there should be a teal box. ⇨
    <span>
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
     FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL
    </span>    
   </p>
  </div>
 </body>
</html>