OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <link rel="stylesheet" href="resources/region-style.css"> | |
3 <style> | |
4 #region1, #region2, #region3 { | |
5 border: 1px solid black; | |
6 } | |
7 | |
8 #region1 { | |
9 width: 400px; | |
10 height: 150px; | |
11 overflow-y: hidden; | |
12 } | |
13 | |
14 #region2 { | |
15 width: 400px; | |
16 height: 150px; | |
17 } | |
18 | |
19 #region3 { | |
20 width: 400px; | |
21 height: 150px; | |
22 } | |
23 </style> | |
24 <p>The first and last lines of text in the regions below should be clipped to th
e green box. The overflow | |
25 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> | |
26 | |
27 <div id="container"> | |
28 <div id="region1"> | |
29 <div class="overflowContent"> | |
30 <div class="overflowFirstBox" style="border-bottom-width: 0px; paddi
ng: 5px;"> | |
31 <div class="overflowBox floatLeft" id="float1"></div> <div class
="overflowBox floatRight" id="float2"></div> | |
32 <div class="overflowSecondBox" style="border-bottom-width: 0px;"
> | |
33 <p>These lines will not spill out of the regions. These line
s will not spill out of the regions. | |
34 These lines will not spill out of the regions. These lines w
ill not spill out of the regions.</p> | |
35 <p style="text-align: justify;">These lines will not spill o
ut of the regions.</p> | |
36 </div> | |
37 </div> | |
38 </div> | |
39 </div> | |
40 <div id="region2"> | |
41 <div class="overflowContent" style="padding-top: 0px;"> | |
42 <div class="overflowFirstBox" style="padding: 5px; padding-top: 0px;
border-top-width: 0px;"> | |
43 <div class="overflowSecondBox" style="padding-top: 0px; border-t
op-width: 0px;"> | |
44 <p style="padding-top:0px;margin-top:0px;">These lines will
not spill out of the regions. These lines will not spill out of the regions. The
se lines will not spill out of the regions. </p> | |
45 </div> | |
46 </div> | |
47 </div> | |
48 </div> | |
49 <div id="region3"></div> | |
50 </div> | |
51 | |
52 <script> | |
53 document.body.offsetLeft; | |
54 document.getElementById('float1').style.width = '50px'; | |
55 document.getElementById('float2').style.width = '50px'; | |
56 </script> | |
OLD | NEW |