forked from tiy-orl/html-css-fundamentals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
19-good-float.html
51 lines (47 loc) · 3.18 KB
/
19-good-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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Floats (The Good Parts)</title>
<style>
html {
background: #ccc;
margin: 0;
padding: 0;
}
body {
background: white;
width: 800px;
margin: 0 auto;
padding: 1em;
}
h1 {
margin: 0;
padding: 1em 0;
}
img.out-of-flow {
position: relative;
left: 0;
}
img.in-flow {
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<main>
<h1>Floats</h1>
<h2>An Unfloated Image</h2>
<p><img class="out-of-flow" src="http://fillmurray.com/100/100" alt="Bill Murray"/> Spicy jalapeno bacon ipsum dolor amet boudin strip steak tri-tip prosciutto tongue pork belly pancetta swine tail kevin andouille. Tail sausage pork, flank shoulder burgdoggen capicola turkey tri-tip doner ground round kevin tongue. Meatloaf capicola sirloin, jerky cupim brisket doner ball tip ribeye fatback tenderloin ham swine tri-tip leberkas. Pastrami kielbasa tri-tip beef andouille frankfurter picanha ball tip corned beef pork sausage.</p>
<h2>A Floated Image</h2>
<p><img class="in-flow" src="http://fillmurray.com/100/100" alt="Bill Murray"/> Bacon biltong ground round, bresaola pig pork chop strip steak chicken tongue spare ribs venison doner boudin. Bacon beef ribs brisket ham. Capicola tongue cow short ribs prosciutto jerky. Bacon salami beef ribs meatball, shankle porchetta ham hock meatloaf swine short ribs pork chop. </p>
<p>Landjaeger tri-tip bacon fatback, prosciutto turducken ball tip biltong hamburger doner spare ribs. Ribeye meatball kevin chicken capicola doner. Doner filet mignon bresaola, turkey beef ribs biltong hamburger alcatra. Venison ball tip porchetta shankle ham hock cupim boudin pig pancetta corned beef sirloin prosciutto picanha. Pork loin jowl meatloaf tongue cupim landjaeger kevin prosciutto strip steak pancetta. Rump beef biltong pork belly swine sirloin shoulder sausage.</p>
<h2>Clearing a Floated Image</h2>
<p><img class="in-flow" src="http://fillmurray.com/100/100" alt="Bill Murray"/>Burgdoggen venison frankfurter sirloin brisket prosciutto picanha cupim. Pork chop meatloaf beef ribs, flank swine kielbasa fatback. Shank leberkas filet mignon strip steak, pork short ribs ground round turducken meatball doner bresaola. Fatback biltong swine bacon ball tip. Chicken tongue shankle, shoulder sirloin ribeye biltong turkey cow. Brisket hamburger t-bone, ball tip alcatra fatback rump shoulder.</p>
<p class="clear">Flank t-bone cupim frankfurter turkey kevin rump bresaola brisket leberkas chuck andouille. Prosciutto short loin meatball tail. Jowl ham hock tail picanha, pork frankfurter pancetta sausage drumstick ball tip. Spare ribs ground round jerky alcatra frankfurter, short ribs doner leberkas. Shank kevin pork loin landjaeger venison, pig swine pork chop shankle prosciutto meatloaf ball tip. Pork leberkas jowl brisket flank turducken chuck pork chop shankle corned beef ribeye shank jerky ground round. Pancetta strip steak short ribs pork loin frankfurter turducken.</p>
</main>
</body>
</html>