OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 | |
3 <style> | |
4 #content { | |
5 -webkit-flow-into: flow1; | |
6 text-align: justify; | |
7 padding: 5px; | |
8 font-size: 10px; | |
9 font-family: Ahem; | |
10 -webkit-font-smoothing: none; | |
11 } | |
12 | |
13 #first-box { | |
14 border: 1px solid blue; | |
15 } | |
16 | |
17 #second-box { | |
18 margin:10px; | |
19 border: 1px solid green; | |
20 } | |
21 | |
22 #float1 { | |
23 float: left; | |
24 width: 130px; | |
25 height: 110px; | |
26 background-color:green | |
27 } | |
28 | |
29 #float2 { | |
30 float: right; | |
31 width: 130px; | |
32 height: 130px; | |
33 background-color:yellow | |
34 } | |
35 | |
36 #region1, #region2, #region3 { | |
37 border: 1px solid black; | |
38 -webkit-flow-from: flow1; | |
39 } | |
40 | |
41 #region1 { | |
42 width: 400px; | |
43 height: 100px; | |
44 } | |
45 | |
46 #region2 { | |
47 width: 300px; | |
48 height: 120px; | |
49 } | |
50 | |
51 #region3 { | |
52 width: 400px; | |
53 height: 300px; | |
54 } | |
55 </style> | |
56 | |
57 <p>In the example below, the first float pushes content into region #2, and the
second float pushes both floats into region #3.</p> | |
58 | |
59 <div id="content"> | |
60 <div id="first-box"> | |
61 <div id="second-box"> | |
62 <p><img id="float1"> <img id="float2"> This line of text should not
get out of the region. This line of text should not get out of the region. This
line of text should not get out of the region. This line of text should not get
out of the region.</p> | |
63 <p>This line of text should not get out of the region. This line of
text should not get out of the region. This line of text should not get out of t
he region. This line of text should not get out of the region.</p> | |
64 <p>This line of text should not get out of the region.</p> | |
65 </div> | |
66 </div> | |
67 </div> | |
68 | |
69 <div id="container"> | |
70 <div id="region1"></div> | |
71 <div id="region2"></div> | |
72 <div id="region3"></div> | |
73 </div> | |
OLD | NEW |