OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 | |
3 <style> | |
4 html { | |
5 line-height: 18px; | |
6 } | |
7 | |
8 #content { | |
9 text-align: justify; | |
10 padding: 5px; | |
11 } | |
12 | |
13 #first-box { | |
14 border: 1px solid blue; | |
15 padding:5px; | |
16 } | |
17 | |
18 #second-box { | |
19 border: 1px solid green; | |
20 overflow: hidden; | |
21 } | |
22 | |
23 #content-two { | |
24 text-align: justify; | |
25 padding-left: 5px; | |
26 padding-right: 5px; | |
27 } | |
28 | |
29 #first-box-two { | |
30 border: 1px solid blue; | |
31 padding:5px; | |
32 border-top: none; | |
33 padding-top: 0; | |
34 } | |
35 | |
36 #second-box-two { | |
37 border: 1px solid green; | |
38 height: 85px; | |
39 border-top: none; | |
40 padding-top: 0; | |
41 } | |
42 | |
43 #region1, #region2, #region3 { | |
44 border: 1px solid black; | |
45 } | |
46 | |
47 #region1 { | |
48 width: 400px; | |
49 height: 143px; | |
50 overflow:hidden; | |
51 } | |
52 | |
53 #region2 { | |
54 width: 400px; | |
55 height: 150px; | |
56 overflow:hidden; | |
57 } | |
58 | |
59 #region3 { | |
60 width: 400px; | |
61 height: 150px; | |
62 } | |
63 | |
64 .float { width:30px; height:50px; background-color: lime } | |
65 .left { float: left } | |
66 .right { float: right } | |
67 </style> | |
68 | |
69 <body> | |
70 <p>The first and last lines of text in the regions below should be clipped to th
e green box. The overflow | |
71 section sizes itself and clips differently in each region. The green box should
be even with the lime floats at the top of the first region.</p> | |
72 | |
73 <div id="container"> | |
74 <div id="region1"> | |
75 <div id="content"> | |
76 <div id="first-box"> | |
77 <div class="float left"></div> <div class="float right"></div> | |
78 <div id="second-box"> | |
79 <p>This is a paragraph that spans more than one line but les
s than three lines.</p> | |
80 <p>1<br>2<br>3<br> | |
81 </div> | |
82 </div> | |
83 </div> | |
84 </div> | |
85 <div id="region2"> | |
86 <div id="content-two"> | |
87 <div id="first-box-two"> | |
88 <div id="second-box-two"> | |
89 4<br>This paragraph spans three lines in region1 and then fl
ows into three lines in region2. | |
90 </div> | |
91 </div> | |
92 </div> | |
93 </div> | |
94 <div id="region3"></div> | |
95 </div> | |
OLD | NEW |