1 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0//EN">
4 <title>Replaced inline elements with % widths
</title>
5 <style type=
"text/css">
6 div
.a
{ width: 300px; height: 100px; background: red
; }
7 div
.a p
{ width: 200%; }
8 div
.a img
{ width: 50%; height: 100px; vertical-align: bottom
; }
9 div
.b
{ width: 300px; position: relative
; }
10 div
.b p
{ width: 200%; }
11 div
.b img
{ width: 50%; height: 100px; vertical-align: bottom
; }
12 div
.b span
{ position: absolute
; top: 0; left: 0; background: green
; width: 300px; height: 100px; }
16 <p>There should be no red below, just two
300×100 pixel green
17 rectangles of different shades, seperated by
1em of margin.
</p>
20 <img src=
"resources/1x1-green.png" alt=
"Image support required for this test">
25 <img src=
"resources/1x1-red.png" alt=
"Image support required for this test">