8000 float examples · JXtreehouse/css-examples@cb9aef2 · GitHub
Skip to content

Commit cb9aef2

Browse files
rachelandrewrachelandrew
committed
float examples
1 parent ec9eea9 commit cb9aef2

File tree

7 files changed

+404
-0
lines changed

7 files changed

+404
-0
lines changed

‎learn/tasks/float/float1-download.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Float: Task 1</title>
6+
<style>
7+
body {
8+
background-color: #fff;
9+
color: #333;
10+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
11+
padding: 1em;
12+
margin: 0;
13+
}
14+
* {
15+
box-sizing: border-box;
16+
}
17+
.box {
18+
width: 500px;
19+
padding: 0.5em;
20+
}
21+
.float {
22+
margin: 15px;
23+
width: 150px;
24+
height: 150px;
25+
border-radius: 5px;
26+
background-color: rgb(207,232,220);
27+
padding: 1em;
28+
}
29+
30+
.float1 {
31+
}
32+
33+
.float2 {
34+
}
35+
</style>
36+
37+
</head>
38+
39+
<body>
40+
41+
<div class="box">
42+
<div class="float float1">One</div>
43+
<div class="float float2">Two</div>
44+
<p>The two boxes should float to either side of this text.</p>
45+
</div>
46+
47+
</body>
48+
49+
</html>

‎learn/tasks/float/float1.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Float: Task 1</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
width: 500px;
13+
padding: .5em;
14+
}
15+
.float {
16+
margin: 15px;
17+
width: 150px;
18+
height: 150px;
19+
border-radius: 5px;
20+
background-color: rgb(207,232,220);
21+
padding: 1em;
22+
}
23+
</style>
24+
25+
<style class="editable">
26+
.float1 {
27+
28+
}
29+
30+
.float2 {
31+
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
<section class="preview">
38+
<div class="box">
39+
<div class="float float1">One</div>
40+
<div class="float float2">Two</div>
41+
<p>The two boxes should float to either side of this text.</p>
42+
</div>
43+
44+
</section>
45+
46+
<textarea class="playable playable-css" style="height: 220px;">
47+
.float1 {
48+
49+
}
50+
51+
.float2 {
52+
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 130px;">
57+
<div class="box">
58+
<div class="float float1">One</div>
59+
<div class="float float2">Two</div>
60+
<p>The two boxes should float to either side of this text.</p>
61+
</div>
62+
</textarea>
63+
64+
<div class="playable-buttons">
65+
<input id="reset" type="button" value="Reset" />
66+
</div>
67+
</body>
68+
<script src="../playable.js"></script>
69+
</html>

‎learn/tasks/float/float2-download.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Float: Task 2</title>
6+
<style>
7+
body {
8+
background-color: #fff;
9+
color: #333;
10+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
11+
padding: 1em;
12+
margin: 0;
13+
}
14+
* {
15+
box-sizing: border-box;
16+
}
17+
.box {
18+
width: 500px;
19+
padding: 0.5em;
20+
}
21+
.float {
22+
margin: 15px;
23+
width: 150px;
24+
height: 150px;
25+
border-radius: 5px;
26+
background-color: rgb(207,232,220);
27+
padding: 1em;
28+
}
29+
.float {
30+
}
31+
32+
.below {
33+
}
34+
</style>
35+
36+
</head>
37+
38+
<body>
39+
40+
<div class="box">
41+
<div class="float">Float</div>
42+
<p>This sentence appears next to the float.</p>
43+
<p class="below">Cause this sentence to appear below the float.</p>
44+
</div>
45+
46+
</body>
47+
48+
</html>

‎learn/tasks/float/float2.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Float: Task 2</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.box {
12+
width: 500px;
13+
padding: .5em;
14+
}
15+
.float {
16+
margin: 15px;
17+
width: 150px;
18+
height: 150px;
19+
border-radius: 5px;
20+
background-color: rgb(207,232,220);
21+
padding: 1em;
22+
}
23+
</style>
24+
25+
<style class="editable">
26+
.float {
27+
28+
}
29+
30+
.below {
31+
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
<section class="preview">
38+
<div class="box">
39+
<div class="float">Float</div>
40+
<p>This sentence appears next to the float.</p>
41+
<p class="below">Cause this sentence to appear below the float.</p>
42+
</div>
43+
44+
</section>
45+
46+
<textarea class="playable playable-css" style="height: 220px;">
47+
.float {
48+
49+
}
50+
51+
.below {
52+
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 130px;">
57+
<div class="box">
58+
<div class="float">Float</div>
59+
<p>This sentence appears next to the float.</p>
60+
<p class="below">Cause this sentence to appear below the float.</p>
61+
</div>
62+
</textarea>
63+
64+
<div class="playable-buttons">
65+
<input id="reset" type="button" value="Reset" />
66+
</div>
67+
</body>
68+
<script src="../playable.js"></script>
69+
</html>

‎learn/tasks/float/float3-download.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Float: Task 3</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
* {
16+
box-sizing: border-box;
17+
}
18+
.box {
19+
width: 500px;
20+
padding: 0.5em;
21+
}
22+
.float {
23+
margin: 15px;
24+
width: 150px;
25+
height: 150px;
26+
border-radius: 5px;
27+
background-color: rgb(207,232,220);
28+
padding: 1em;
29+
float: right;
30+
}
31+
32+
.box {
33+
background-color: rgb(79,185,227);
34+
padding: 10px;
35+
color: #fff;
36+
}
37+
</style>
38+
39+
</head>
40+
41+
<body>
42+
43+
<div class="box">
44+
<div class="float">Float</div>
45+
<p>This sentence appears next to the float.</p>
46+
</div>
47+
48+
</body>
49+
50+
</html>

‎learn/tasks/float/float3.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Float: Task 3</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.preview {
9+
display: flow-root;
10+
}
11+
* {
12+
box-sizing: border-box;
13+
}
14+
.box {
15+
width: 500px;
16+
padding: .5em;
17+
}
18+
.float {
19+
margin: 15px;
20+
width: 150px;
21+
height: 150px;
22+
border-radius: 5px;
23+
background-color: rgb(207,232,220);
24+
padding: 1em;
25+
}
26+
27+
.box {
28+
background-color: rgb(79,185,227);
29+
padding: 10px;
30+
color: #fff;
31+
}
32+
</style>
33+
34+
<style class="editable">
35+
.box {
36+
37+
}
38+
39+
.float {
40+
float: right;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<section class="preview">
47+
<div class="box">
48+
<div class="float">Float</div>
49+
<p>This sentence appears next to the float.</p>
50+
51+
</div>
52+
53+
</section>
54+
55+
<textarea class="playable playable-css" style="height: 220px;">
56+
.float {
57+
float: right;
58+
}
59+
60+
.box {
61+
62+
}
63+
</textarea>
64+
65+
<textarea class="playable playable-html" style="height: 130px;">
66+
<div class="box">
67+
<div class="float">Float</div>
68+
<p>This sentence appears next to the float.</p>
69+
</div>
70+
</textarea>
71+
72+
<div class="playable-buttons">
73+
<input id="reset" type="button" value="Reset" />
74+
</div>
75+
</body>
76+
<script src="../playable.js"></script>
77+
</html>

0 commit comments

Comments
 (0)