1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Relative-positioning Inline Containing Blocks and Floats</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
7 <meta name="flags" content="">
8 <meta name="assert" content="When such an inline box is affected by relative positioning, the relative positioning also affects the block-level box contained in the inline box.">
9 <style type="text/css">
10 .container {
11 margin: 1em;
12 font: 20px/1 Ahem;
13 border: solid silver;
14 width: 4em;
15 color: aqua;
16 background: fuchsia;
17 }
18 .relpos {
19 position: relative;
20 display: inline;
21 color: yellow;
22 left: 2em;
23 }
24 .block, .controlC {
25 color: orange;
26 background: orange;
27 width: 2em;
28 border-left: 2em solid blue;
29 }
30 .block {
31 margin-left: -2em;
32 height: 10px;
33 }
34
35 .float {
36 width: 2em;
37 height: 10px;
38 }
39 .float.L {
40 float: left;
41 background: orange;
42 color: orange;
43 }
44 .float.R {
45 float: right;
46 background: blue;
47 color: blue;
48 /* Back position to fill the hole left by relpos'ing .float.L */
49 position: relative;
50 right: 4em;
51 }
52
53 .controlB {
54 color: yellow;
55 }
56 .controlC {
57 margin-left: 0;
58 }
59 </style>
60 </head>
61 <body>
62 <p>The patterns in the two silver boxes below must be identical.</p>
63 <div class="container">
64 A<div class="relpos">B
65 <div class="block"></div>
66 <div class="float L"></div>
67 <div class="float R"></div>
68 <div></div>
69 B</div>A
70 </div>
71 <div class="container">
72 A <span class="controlB">B</span>
73 <div class="controlC">C</div>
74 A<span class="controlB">B</span>
75 </div>
76
77 </body>
78 </html>