third_party/WebKit/LayoutTests/css1/box_properties/clear_float.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2 <HTML>
   3 <HEAD>
   4 <TITLE>CSS1 Test Suite: 5.5.26 clear</TITLE>
   5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   6 <META http-equiv="Content-Style-Type" content="text/css">
   7
   8 <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
   9 <STYLE type="text/css">
  10 body {overflow: hidden;}
  11 P { margin: 0; padding: 0; text-align:  justify;}
  12
  13 DIV.menu {float: left; clear: left; width: 11em;
  14           margin: 0; margin-bottom: 10px; padding: 0.5em;}
  15 DIV.menu H1 {font-size: 1.2em; margin: 0; padding: 0;}
  16 DIV.menu UL {margin: 0.2em 0.3em 0.2em 1em; padding: 0;}
  17 DIV.article {padding: 0.5em; margin: 0; margin-left: 14em; margin-right: 2em;
  18              color: black; background: yellow; clear: none;}
  19 </STYLE>
  20
  21 </HEAD>
  22
  23 <BODY><P>The style declarations which apply to the text below are:</P>
  24 <PRE>P { margin: 0; padding: 0; text-align:  justify;}
  25
  26 DIV.menu {float: left; clear: left; width: 11em;
  27           margin: 0; margin-bottom: 10px; padding: 0.5em;}
  28 DIV.menu H1 {font-size: 1.2em; margin: 0; padding: 0;}
  29 DIV.menu UL {margin: 0.2em 0.3em 0.2em 1em; padding: 0;}
  30 DIV.article {padding: 0.5em; margin: 0; margin-left: 14em; margin-right: 2em;
  31              color: black; background: yellow; clear: none;}
  32
  33 </PRE>
  34 <HR>
  35 <div class=menu style="color: white; background: green">
  36   <h1>Top menu</h1>
  37   <ul>
  38     <li>green
  39     <li>white text
  40     <li>0.5em padding
  41     <li>0.5em margin
  42   </ul>
  43 </div>
  44
  45 <div class=menu style="color: white; background: blue">
  46   <h1>Bottom menu</h1>
  47   <ul>
  48     <li>blue background
  49     <li>white text
  50     <li>0.5em padding
  51     <li>0.5em margin
  52   </ul>
  53 </div>
  54
  55 <div class=article>
  56  <h1>The 'clear' property</h1>
  57  <p>This page has two floating "menus" on the side; one has a green background, and the other a blue background.  Due to settings on the 'float' and 'clear' properties, the two menus should appear on the left side of the page, the blue below the green. There should be a 10px gap between the two menus. There should also be a 10px gap between the top menu and the top of the page.
  58  </p>
  59  <P>The top of the yellow rectangle (to which this paragraph belongs) should be vertically aligned with the top of the green rectangle.
  60  </P>
  61 </div>
  62
  63
  64 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  65 <TR>
  66 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  67 </TR>
  68 <TR>
  69 <TD bgcolor="silver">&nbsp;</TD>
  70 <TD><div class=menu style="color: white; background: green">
  71   <h1>Top menu</h1>
  72   <ul>
  73     <li>green
  74     <li>white text
  75     <li>0.5em padding
  76     <li>0.5em margin
  77   </ul>
  78 </div>
  79
  80 <div class=menu style="color: white; background: blue">
  81   <h1>Bottom menu</h1>
  82   <ul>
  83     <li>blue background
  84     <li>white text
  85     <li>0.5em padding
  86     <li>0.5em margin
  87   </ul>
  88 </div>
  89
  90 <div class=article>
  91  <h1>The 'clear' property</h1>
  92  <p>This page has two floating "menus" on the side; one has a green background, and the other a blue background.  Due to settings on the 'float' and 'clear' properties, the two menus should appear on the left side of the page, the blue below the green. There should be a 10px gap between the two menus. There should also be a 10px gap between the top menu and the top of the page.
  93  </p>
  94  <P>The top of the yellow rectangle (to which this paragraph belongs) should be vertically aligned with the top of the green rectangle.
  95  </P>
  96 </div>
  97 </TD></TR></TABLE></BODY>
  98 </HTML>