OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 | |
3 <style> | |
4 .test_paragraph { | |
5 margin-top: 1em; | |
6 margin-bottom: 1em; | |
7 text-align: justify; | |
8 font-size: 10px; | |
9 font-family: Ahem; | |
10 -webkit-font-smoothing: none; | |
11 } | |
12 | |
13 #region1 { | |
14 border: 1px solid black; | |
15 width: 190px; | |
16 height: 90px; | |
17 padding: 5px; | |
18 } | |
19 | |
20 #first-box1 { | |
21 border: 1px solid blue; | |
22 border-bottom: none; | |
23 } | |
24 | |
25 #second-box1 { | |
26 margin:10px; | |
27 border: 1px solid green; | |
28 border-bottom: none; | |
29 width: 166px; | |
30 height: 83px; | |
31 } | |
32 | |
33 #first-paragraph2 { | |
34 margin-top: 0px; | |
35 } | |
36 | |
37 /* Created to justify the last line of text in the div */ | |
38 #third-paragraph2:after { | |
39 content: " ____"; | |
40 line-height: 0; | |
41 visibility: hidden; | |
42 } | |
43 | |
44 #region2 { | |
45 border: 1px solid black; | |
46 width: 290px; | |
47 height: 170px; | |
48 padding: 5px; | |
49 } | |
50 | |
51 #first-box2 { | |
52 border: 1px solid blue; | |
53 border-top: none; | |
54 border-bottom: none; | |
55 } | |
56 | |
57 #second-box2 { | |
58 margin-left:10px; | |
59 margin-top: -5px; | |
60 padding: 0px; | |
61 border: 1px solid green; | |
62 border-top: none; | |
63 border-bottom: none; | |
64 width: 266px; | |
65 height: 180px; | |
66 } | |
67 | |
68 #paragraph3 { | |
69 margin-top: 0px; | |
70 } | |
71 | |
72 #region3 { | |
73 border: 1px solid black; | |
74 width: 110px; | |
75 height: 110px; | |
76 padding: 5px; | |
77 } | |
78 | |
79 #first-box3 { | |
80 border: 1px solid blue; | |
81 border-top: none; | |
82 } | |
83 | |
84 #second-box3 { | |
85 margin:10px; | |
86 margin-top: -5px; | |
87 border: 1px solid green; | |
88 border-top: none; | |
89 width: 86px; | |
90 } | |
91 | |
92 #float1 { | |
93 float: right; | |
94 width: 70px; | |
95 height: 35px; | |
96 border: 1px solid red; | |
97 } | |
98 </style> | |
99 | |
100 <div id="content"> | |
101 <div id="region1"> | |
102 <div id="first-box1"> | |
103 <div id="second-box1"> | |
104 <div class="test_paragraph" id="paragraph1">This line of text sh
ould not get out of the region. This line of text should not get</div> | |
105 </div> | |
106 </div> | |
107 </div> | |
108 | |
109 <div id="region2"> | |
110 <div id="first-box2"> | |
111 <div id="second-box2"> | |
112 <div class="test_paragraph" id="first-paragraph2">out of the reg
ion. <div id="float1">Float 1</div>This line of text should not get out of the r
egion. This line of text should not get out of the region.</div> | |
113 <div class="test_paragraph">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.</div> | |
114 <div class="test_paragraph" id="third-paragraph2">This line of t
ext should not get out of the region.</div> | |
115 </div> | |
116 </div> | |
117 </div> | |
118 | |
119 <div id="region3"> | |
120 <div id="first-box3"> | |
121 <div id="second-box3"> | |
122 <div class="test_paragraph" id="paragraph3">This line of text sh
ould not get out of the region.</div> | |
123 </div> | |
124 </div> | |
125 </div> | |
126 </div> | |
OLD | NEW |