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 /* Created to justify the last line of text in the div */ | |
14 #paragraph1:after { | |
15 content: " ____"; | |
16 line-height: 0; | |
17 visibility: hidden; | |
18 } | |
19 | |
20 #region1 { | |
21 border: 1px solid black; | |
22 width: 390px; | |
23 height: 80px; | |
24 padding: 5px; | |
25 } | |
26 | |
27 #first-box1 { | |
28 border: 1px solid blue; | |
29 border-bottom: none; | |
30 } | |
31 | |
32 #second-box1 { | |
33 margin:10px; | |
34 border: 1px solid green; | |
35 border-bottom: none; | |
36 width: 366px; | |
37 height: 73px; | |
38 } | |
39 | |
40 #first-paragraph2 { | |
41 margin-top: 0px; | |
42 } | |
43 | |
44 /* Created to justify the last line of text in the div */ | |
45 #second-paragraph2:after { | |
46 content: " ____"; | |
47 line-height: 0; | |
48 visibility: hidden; | |
49 } | |
50 | |
51 #region2 { | |
52 border: 1px solid black; | |
53 width: 290px; | |
54 height: 80px; | |
55 padding: 5px; | |
56 } | |
57 | |
58 #first-box2 { | |
59 border: 1px solid blue; | |
60 border-top: none; | |
61 border-bottom: none; | |
62 } | |
63 | |
64 #second-box2 { | |
65 margin-left:10px; | |
66 margin-top: -5px; | |
67 padding: 0px; | |
68 border: 1px solid green; | |
69 border-top: none; | |
70 border-bottom: none; | |
71 width: 266px; | |
72 height: 90px; | |
73 } | |
74 | |
75 #first-paragraph3 { | |
76 margin-top: 0px; | |
77 } | |
78 | |
79 #region3 { | |
80 border: 1px solid black; | |
81 width: 390px; | |
82 height: 80px; | |
83 padding: 5px; | |
84 } | |
85 | |
86 #first-box3 { | |
87 border: 1px solid blue; | |
88 border-top: none; | |
89 } | |
90 | |
91 #second-box3 { | |
92 margin:10px; | |
93 margin-top: -5px; | |
94 border: 1px solid green; | |
95 border-top: none; | |
96 width: 366px; | |
97 } | |
98 | |
99 .imgFloat { | |
100 float: right; | |
101 background-color:green; | |
102 } | |
103 | |
104 #float1 { | |
105 width: 130px; | |
106 height: 63px; | |
107 } | |
108 | |
109 #float2 { | |
110 width: 30px; | |
111 height: 37px; | |
112 } | |
113 | |
114 #imgAbsolute { | |
115 position: absolute; | |
116 background-color: green; | |
117 width: 100px; | |
118 height: 37px; | |
119 left: 292px; | |
120 top: 101px; | |
121 } | |
122 </style> | |
123 | |
124 <div id="content"> | |
125 <div id="region1"> | |
126 <div id="first-box1"> | |
127 <div id="second-box1"> | |
128 <div class="test_paragraph" id="paragraph1">This <img class="img
Float" id="float1" src="resources/transparent.png">line of text should not get o
ut of the region. This line of text should not get out of the region. This line
of text should not</div> | |
129 </div> | |
130 </div> | |
131 </div> | |
132 | |
133 <div id="region2"> | |
134 <div id="first-box2"> | |
135 <div id="second-box2"> | |
136 <div class="test_paragraph" id="first-paragraph2">get<img class=
"imgFloat" id="float2" src="resources/transparent.png"> out of the region. This
line of text should not get out of the region.</div> | |
137 <div class="test_paragraph" id="second-paragraph2">This line of
text should not get out of the region. This line of text should not get out of t
he region.</div> | |
138 </div> | |
139 </div> | |
140 </div> | |
141 | |
142 <img id="imgAbsolute" src="resources/transparent.png"> | |
143 | |
144 <div id="region3"> | |
145 <div id="first-box3"> | |
146 <div id="second-box3"> | |
147 <div class="test_paragraph" id="first-paragraph3">This line of t
ext should not get out of the region. This line of text should not get out of th
e region.</div> | |
148 <div class="test_paragraph" id="second-paragraph3">This line of
text should not get out of the region.</div> | |
149 </div> | |
150 </div> | |
151 </div> | |
152 </div> | |
OLD | NEW |