﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>CSS 2.1 Test Suite: Floating Elements</title>
  <style type="text/css">
   p { color: navy; }
   .test div { margin: 1em; padding: 0 0 0.5em; border: 0.5em solid; border-bottom: none; background: navy; color: blue; }
   .test img { width: 10em; background: red; color: yellow; }
   .test img.left { float: left; }
   .test img.right { float: right; }
  </style>
  <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>
  <p>In the following test, the teal squares must be just inside the
  top and sides of the blue rectangle.</p>
  <div class="test">
   <div>
    <img alt="FAIL: You need image support." src="support/square-teal.png" class="left">
    <img alt="FAIL: You need image support." src="support/square-teal.png" class="right">
    Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
    Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
   </div>
  </div>
 </body>
</html>