﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>CSS 2.1 Test Suite: float</title>
  <style type="text/css">
   p { color: navy; font-size: 2em; margin: 1em; }
   div { text-align: justify; }
   p.end { text-align: right; }
   .float { float: left; width: 50%; background: blue; color: white; font-variant: small-caps; }
   .flow { color: silver; background: url(support/ruler-h-50%25.png) bottom center no-repeat; }
  </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/visudet.html#the-width-property" title="10.2 Content width: the 'width' property">
 </head>
 <body>
  <!-- This test sucks. -->
  <p>⇩ The following blue box should be exactly half the width
  of the viewport, on the left of the 50% ruler mark.</p>
  <div class="float">
   ignore this float text ignore this float text ignore this float
   text ignore this float text ignore this float text ignore this
   float text ignore this float text ignore this float text ignore
   this float text ignore this float text ignore this float text
   ignore this float text ignore this float text ignore this float
   text ignore this float text ignore this float text ignore this
   float text ignore this float text ignore this float text ignore
   this float text ignore this float text ignore this float text
   ignore this float text ignore this float text ignore this float
   text ignore this float text ignore this float text ignore this
   float text ignore this float text ignore this float text ignore
   this float text ignore this float text ignore this float text
   ignore this float text ignore this float text ignore this float
   text ignore this float text ignore this float text ignore this
   float text ignore this float text ignore this float text ignore
   this float text ignore this float text ignore this float text
   ignore this float text ignore this float text ignore this float
  </div>
  <div class="flow">
   this is some dummy text this is some dummy text this is some dummy
   text this is some dummy text this is some dummy text this is some
   dummy text this is some dummy text this is some dummy text this is
   some dummy text this is some dummy text this is some dummy text
   this is some dummy text this is some dummy text this is some dummy
   text this is some dummy text this is some dummy text this is some
   dummy text this is some dummy text this is some dummy text this is
   some dummy text this is some dummy text this is some dummy text
   this is some dummy text this is some dummy text this is some dummy
   text this is some dummy text this is some dummy text this is some
   dummy text this is some dummy text this is some dummy text this is
   some dummy text this is some dummy text this is some dummy text
   this is some dummy text this is some dummy text this is some dummy
   text this is some dummy text this is some dummy text this is some
   dummy text this is some dummy text this is some dummy text this is
   some dummy text this is some dummy text this is some dummy text
   this is some dummy text this is some dummy text this is some dummy
   text this is some dummy text this is some dummy text this is some
   dummy text this is some dummy text this is some dummy text this is
   some dummy text this is some dummy text this is some dummy text
   this is some dummy text this is some dummy text this is some dummy
   text this is some dummy text this is some dummy text this is some
   dummy text this is some dummy text this is some dummy text this is
   some dummy text this is some dummy text this is some dummy text
   this is some dummy text this is some dummy text this is some dummy
   text this is some dummy text this is some dummy text this is some
   dummy text this is some dummy text this is some dummy text this is
   some dummy text this is some dummy text
  </div>
  <p class="end">The above gray text should flow around the blue box.
  ⇧</p>
 </body>
</html>