-
Notifications
You must be signed in to change notification settings - Fork 1
/
css float.html
74 lines (58 loc) · 1.57 KB
/
css float.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
### CSS FLOAT ###
<!DOCTYPE html>
<html lang="en">
<!-- TODO
1. Make both paragraph elements wrap around the image.
2. Use Float to move the cat div to the left and the dog div to the right.
3. Use clear to make the footer go below both the cat and dog div. -->
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
div {
display:inline-block;
width: 40%;
}
p {
font-size: 2em;
}
.cat {
background-color: aquamarine;
}
.dog {
background-color: coral;
float:right;
}
footer {
text-align: center;
background-color: blueviolet;
clear:both;
}
img {
float:left;
}
</style>
</head>
<body>
<div class="cat">
<h2>CatCSS</h2>
<img src="cat.jpeg" alt="cat in a box" />
<p class="first-paragraph">Nap all day cat dog hate mouse eat string barf pillow no baths hate everything but kitty
poochy. Sleep on keyboard
toy
mouse squeak roll over. Mesmerizing birds. Poop on grasses licks paws destroy couch intently sniff hand. The dog
smells
bad gnaw.</p>
</div>
<div class="dog">
<h2>DogCSS</h2>
<img src="dog.jpeg" alt="dogs in a box" />
<p class="second-paragraph">Heckin good boys and girls long woofer big ol wow very biscit long woofer heck what a
nice
floof, long doggo noodle
horse vvv very taste wow. Very taste wow many pats aqua doggo he made many woofs pupperino, puggo doing me a
frighten.</p>
</div>
<footer>Copyright. This is the footer</footer>
</body>
</html>