Skip to content

Commit 895c33d

Browse files
chrisdavidmillschrisdavidmills
committed
adding stacking and float example
1 parent cb6cd83 commit 895c33d

File tree

1 file changed

+102
-0
lines changed

1 file changed

+102
-0
lines changed

‎css/css-layout/stacking-and-float/index.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Stacking and float</title>
6+
<style type="text/css">
7+
8+
div {
9+
font: 12px Arial;
10+
}
11+
12+
span.bold { font-weight: bold; }
13+
14+
#absdiv1 {
15+
opacity: 0.7;
16+
position: absolute;
17+
width: 150px;
18+
height: 200px;
19+
top: 10px;
20+
right: 140px;
21+
border: 1px dashed #990000;
22+
background-color: #ffdddd;
23+
text-align: center;
24+
}
25+
26+
#normdiv {
27+
/* opacity: 0.7; */
28+
height: 100px;
29+
border: 1px dashed #999966;
30+
background-color: #ffffcc;
31+
margin: 0px 10px 0px 10px;
32+
text-align: left;
33+
}
34+
35+
#flodiv1 {
36+
opacity: 0.7;
37+
margin: 0px 10px 0px 20px;
38+
float: left;
39+
width: 150px;
40+
height: 200px;
41+
border: 1px dashed #009900;
42+
background-color: #ccffcc;
43+
text-align: center;
44+
}
45+
46+
#flodiv2 {
47+
opacity: 0.7;
48+
margin: 0px 20px 0px 10px;
49+
float: right;
50+
width: 150px;
51+
height: 200px;
52+
border: 1px dashed #009900;
53+
background-color: #ccffcc;
54+
text-align: center;
55+
}
56+
57+
#absdiv2 {
58+
opacity: 0.7;
59+
position: absolute;
60+
width: 150px;
61+
height: 100px;
62+
top: 130px;
63+
left: 100px;
64+
border: 1px dashed #990000;
65+
background-color: #ffdddd;
66+
text-align: center;
67+
}
68+
69+
</style>
70+
</head>
71+
72+
<body>
73+
<br /><br />
74+
75+
<div id="absdiv1">
76+
<br /><span class="bold">DIV #1</span>
77+
<br />position: absolute;
78+
</div>
79+
80+
<div id="flodiv1">
81+
<br /><span class="bold">DIV #2</span>
82+
<br />float: left;
83+
</div>
84+
85+
<div id="flodiv2">
86+
<br /><span class="bold">DIV #3</span>
87+
<br />float: right;
88+
</div>
89+
90+
<br />
91+
92+
<div id="normdiv">
93+
<br /><span class="bold">DIV #4</span>
94+
<br />no positioning
95+
</div>
96+
97+
<div id="absdiv2">
98+
<br /><span class="bold">DIV #5</span>
99+
<br />position: absolute;
100+
</div>
101+
</body>
102+
</html>

0 commit comments

Comments
 (0)