| ap | 92b5752 | 2006-01-05 20:48:53 | [diff] [blame] | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| thatcher | bea5137 | 2005-10-25 00:42:22 | [diff] [blame] | 2 | <html> |
| 3 | <head> |
| 4 | <title>CSS 2.1 Test Suite: Floating Elements</title> |
| 5 | <style type="text/css"> |
| 6 | p { color: navy; } |
| 7 | div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em/1.3 serif; } |
| 8 | div p { width: 7em; padding: 1em; margin: 0; } |
| 9 | div .a { border: solid aqua; background-color: teal; color: white; } |
| 10 | div p.a { float: left; } |
| 11 | div .b { border: solid fuchsia; background-color: purple; color: white; } |
| 12 | div p.b { float: right; } |
| 13 | div .c { border: solid yellow; background-color: orange; color: white; } |
| 14 | div p.c { float: left; } |
| 15 | div .d { border: solid lime; background-color: green; color: white; } |
| 16 | div p.d { float: left; } |
| 17 | </style> |
| darin | 83dae6e | 2007-01-06 01:36:24 | [diff] [blame] | 18 | <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"> |
| thatcher | bea5137 | 2005-10-25 00:42:22 | [diff] [blame] | 19 | </head> |
| 20 | <body> |
| 21 | <p>The big coloured boxes should be level with the top of the small |
| 22 | coloured boxes of the same color (unless there is not enough room |
| 23 | for the big box to fit on the small box's line after the small box, |
| 24 | in which case the big box should be as high as possible below the |
| 25 | small box).</p> |
| 26 | <div> |
| 27 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 28 | dummy text |
| 29 | <span class="a">A</span> |
| 30 | <p class="a">AAAA</p> |
| 31 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 32 | <span class="b">B</span> |
| 33 | <p class="b">BBBB</p> |
| 34 | dummy text dummy text dummy text |
| 35 | <span class="c">C</span> |
| 36 | <p class="c">CCCC</p> |
| 37 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 38 | <span class="d">D</span> |
| 39 | <p class="d">DDDD</p> |
| 40 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 41 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 42 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 43 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 44 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 45 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 46 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 47 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 48 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 49 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 50 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 51 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 52 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 53 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 54 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 55 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 56 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 57 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 58 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 59 | dummy text dummy text dummy text dummy text dummy text dummy text |
| 60 | </div> |
| 61 | </body> |
| 62 | </html> |
