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 #top_paragraph { | |
14 margin-top: 1em; | |
15 margin-bottom: 1em; | |
16 } | |
17 | |
18 #region1 { | |
19 border: 1px solid black; | |
20 width: 390px; | |
21 height: 90px; | |
22 padding: 5px; | |
23 } | |
24 | |
25 #first-box1 { | |
26 border: 1px solid blue; | |
27 border-bottom: none; | |
28 } | |
29 | |
30 #second-box1 { | |
31 margin:10px; | |
32 border: 1px solid green; | |
33 border-bottom: none; | |
34 width: 366px; | |
35 height: 83px; | |
36 } | |
37 | |
38 #region2 { | |
39 border: 1px solid black; | |
40 width: 290px; | |
41 height: 110px; | |
42 padding: 5px; | |
43 } | |
44 | |
45 #first-box2 { | |
46 border: 1px solid blue; | |
47 border-top: none; | |
48 border-bottom: none; | |
49 } | |
50 | |
51 #second-box2 { | |
52 margin-left:10px; | |
53 margin-top: -5px; | |
54 padding: 0px; | |
55 border: 1px solid green; | |
56 border-top: none; | |
57 border-bottom: none; | |
58 width: 266px; | |
59 height: 120px; | |
60 } | |
61 | |
62 #first-paragraph3 { | |
63 margin-top: 0px; | |
64 } | |
65 | |
66 #region3 { | |
67 border: 1px solid black; | |
68 width: 390px; | |
69 height: 290px; | |
70 padding: 5px; | |
71 } | |
72 | |
73 #first-box3 { | |
74 border: 1px solid blue; | |
75 border-top: none; | |
76 } | |
77 | |
78 #second-box3 { | |
79 margin:10px; | |
80 margin-top: -5px; | |
81 border: 1px solid green; | |
82 border-top: none; | |
83 width: 366px; | |
84 } | |
85 | |
86 #imgFloat1 { | |
87 float: left; | |
88 background-color:green; | |
89 width: 130px; | |
90 height: 110px; | |
91 } | |
92 | |
93 #imgFloat2 { | |
94 float: right; | |
95 background-color:yellow; | |
96 width: 130px; | |
97 height: 130px; | |
98 } | |
99 </style> | |
100 | |
101 <div id="top_paragraph">In the example below, the first float pushes content int
o region #2, and the second float pushes both floats into region #3.</div> | |
102 | |
103 <div id="content"> | |
104 <div id="region1"> | |
105 <div id="first-box1"> | |
106 <div id="second-box1"></div> | |
107 </div> | |
108 </div> | |
109 | |
110 <div id="region2"> | |
111 <div id="first-box2"> | |
112 <div id="second-box2"></div> | |
113 </div> | |
114 </div> | |
115 | |
116 <div id="region3"> | |
117 <div id="first-box3"> | |
118 <div id="second-box3"> | |
119 <div class="test_paragraph" id="first-paragraph3">This <img id="
imgFloat1"><img id="imgFloat2">line of text should not get out of the region. Th
is line of text should not get out of the region. This line of text should not g
et out of the region. This line of text should not get out of the region.</div> | |
120 <div class="test_paragraph" id="second-paragraph3">This line of
text should not get out of the region. This line of text should not get out of t
he region. This line of text should not get out of the region. This line of text
should not get out of the region.</div> | |
121 <div class="test_paragraph">This line of text should not get out
of the region.</div> | |
122 </div> | |
123 </div> | |
124 </div> | |
125 </div> | |
OLD | NEW |