third_party/WebKit/LayoutTests/fast/block/float/024.html

   1 <html>
   2 <head>
   3 <style>
   4 body {
   5   margin: 0px;
   6   padding: 0px;
   7 }
   8
   9 #logo {
  10   background-color: green;
  11   border-top: 1px solid white;
  12 }
  13
  14 h1 {
  15   margin-top: 50px;
  16   margin-bottom: 50px;
  17   padding-top: 20px;
  18   padding-bottom: 20px;
  19   font-size: 220%;
  20   color: white;
  21 }
  22
  23 ul {
  24   margin: 0;
  25   padding: 0;
  26 }
  27
  28 li {
  29   float:left;
  30   border: 2px solid blue;
  31   display: block;
  32   margin: 0px;
  33 }
  34 </style>
  35 </head>
  36 <body>
  37 <div id="logo">
  38 <h1 style="height:30px"></h1>
  39 <div>
  40 <ul>
  41 <li>There should be a gap between this float and the green rectangle above.
  42 </ul>
  43 </div>
  44 </div>
  45
  46 <div style="margin-top:100px;background-color:#dddddd; border:2px solid black">
  47 <div style="float:left;width:2em;height:2em;background-color:white"></div>
  48 <div style="clear:both;margin-top:1em;margin-bottom:1em"></div>
  49 This text should be inside a black rectangle and below the 2em white square.
  50 </div>
  51 <div style="margin-top:1em;background-color:#dddddd; border:2px solid black">
  52 <div style="float:left;width:2em;height:2em;background-color:white"></div>
  53 <div style="clear:both;margin-top:-1em;margin-bottom:1em"></div>
  54 This text should also be inside a black rectangle and below the 2em white square.
  55 </div>
  56