OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 | |
3 <style> | |
4 | |
5 @font-face { | |
6 font-family: webkit-ahem; | |
7 font-style: normal; | |
8 src: url(../../resources/Ahem.ttf); | |
9 } | |
10 | |
11 #float1 { | |
12 float: left; | |
13 position:absolute; | |
14 width: 150px; | |
15 height: 102px; | |
16 background-color:green; | |
17 z-index:-1; | |
18 } | |
19 | |
20 #float2 { | |
21 float:right; | |
22 width:200px; | |
23 height:30px; | |
24 background-color:orange | |
25 } | |
26 | |
27 #region1, #region2, #region3 { | |
28 border: 1px solid black; | |
29 } | |
30 | |
31 #region1 { | |
32 width: 170px; | |
33 height: 80px; | |
34 padding: 5px; | |
35 } | |
36 | |
37 #region2 { | |
38 width: 390px; | |
39 height: 89px; | |
40 padding-top:1px; | |
41 padding-left:5px; | |
42 padding-right:5px; | |
43 } | |
44 | |
45 #region3 { | |
46 width: 385px; | |
47 height: 80px; | |
48 padding-left:5px; | |
49 padding-right:10px; | |
50 padding-bottom:10px; | |
51 } | |
52 | |
53 p.flow1 { | |
54 clear:both; | |
55 margin-bottom: 0px; | |
56 } | |
57 | |
58 p.flow2 { | |
59 margin-top: 0px; | |
60 } | |
61 | |
62 </style> | |
63 | |
64 <p>In the example below, the green float should be at the top of the first regio
n and on the left. It should spill into region two. | |
65 The orange float should be on the right at the top of region two.</p> | |
66 | |
67 <div id="region1"> | |
68 <p><img id="float1"></p> | |
69 </div> | |
70 <div id="region2"> | |
71 <img id="float2"> | |
72 <p class="flow1">This line of text should not get out of the region. This li
ne of text should not get out of the region.</p> | |
73 </div> | |
74 <div id="region3"> | |
75 <p class="flow2">This line of text should not get out of the region. This line o
f text should not get out of the region.</p> | |
76 <p>This line of text should not get out of the region.</p> | |
77 </div> | |
78 | |
OLD | NEW |