OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 | |
3 <style> | |
4 #content { | |
5 -webkit-flow-into: flow1; | |
6 padding: 5px; | |
7 } | |
8 | |
9 #first-box { | |
10 border: 1px solid blue; | |
11 } | |
12 | |
13 #second-box { | |
14 margin:auto; | |
15 border: 1px solid green; | |
16 width:75% | |
17 } | |
18 | |
19 #region1, #region2, #region3 { | |
20 border: 1px solid black; | |
21 -webkit-flow-from: flow1; | |
22 } | |
23 | |
24 #region1 { | |
25 width: 280px; | |
26 height: 100px; | |
27 } | |
28 | |
29 #region2 { | |
30 width: 400px; | |
31 height: 180px; | |
32 } | |
33 | |
34 #region3 { | |
35 width: 220px; | |
36 height: 120px; | |
37 } | |
38 | |
39 .float { width:50px; height:50px; background-color: lime; } | |
40 .left { float: left } | |
41 .right { float: right } | |
42 </style> | |
43 | |
44 <body> | |
45 <!--<p>The first and last lines of text in the regions below should be clipped t
o the green box. The overflow | |
46 section sizes itself and clips differently in each region.</p>--> | |
47 <div id="content"> | |
48 <div id="first-box"> | |
49 <div id="second-box"> | |
50 <div class="float left"></div> <div class="float right"></div> | |
51 <p>These lines will not spill out of the regions. These lines will n
ot spill out </p> | |
52 <p>of the regions. These lines will not spill out of the regions. Th
ese lines will not spill out of the regions. </p> | |
53 <p>These lines will not spill out of the regions. These lines will n
ot spill out of the regions. | |
54 These lines will not spill out of the regions. These lines will not
spill out of the regions. </p> | |
55 </div> | |
56 </div> | |
57 </div> | |
58 | |
59 <div id="container"> | |
60 <div id="region1"></div> | |
61 <div id="region2"></div> | |
62 <div id="region3"></div> | |
63 </div> | |
OLD | NEW |