c5525-fltcont-000.xht

Enable keyboard shortcuts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Test: float</title>

  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>

  <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>

  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-09 -->

  <link rel="help" href="http://www.w3.org/TR/REC-CSS1#float"/>

  <meta name="flags" content="image" />

  <style type="text/css"><![CDATA[

   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/visudet.html#block-root-margin" title="10.6.6 Complicated cases"/>

  <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 class="eight" style="width: 75%">

   <div class="nine" style="margin-right: 17px">

<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. &#x21E8;

    </p>

   </div>

<p>

    Inside this blue block on the right there should be a teal box. &#x21E8;

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