Click and drag to scroll left and right to view all 19 figures.
<!-- figure 12.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
p.noMove { position: static; }
</style>
</head>
<body>
<h2>Static positioning</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p noMove="en-US">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus
non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec
maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra
eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis tellus.
Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis. Vestibulum
id interdum urna. Praesent metus enim, euismod at dui eget, varius sagittis risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 600px; }
p.moveRight {
position: relative;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<h3>Relative positioning</h3>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p class="moveRight">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus
non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec
maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra
eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis tellus.
Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis. Vestibulum
id interdum urna. Praesent metus enim, euismod at dui eget, varius sagittis risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
p.moveRight {
writing-mode: horizontal-tb;
position: relative;
offset-block-start: 10px;
offset-inline-start: 50px;
}
</style>
</head>
<body>
<h2>Relative positioning with logical offset</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p class="moveRight">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus
non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec
maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra
eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis tellus.
Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis. Vestibulum
id interdum urna. Praesent metus enim, euismod at dui eget, varius sagittis risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
h2 {
background-color: pink;
position: absolute;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<h2>Absolute positioning</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p>Nulla eget varius tortor, a egestas risus. Nunc interdum commodo hendrerit. Aliquam
rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin. Duis leo neque,
porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus non fermentum.
Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec maximus
accumsan augue non efficitur. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra eleifend.
Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis
tellus. Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis.
Vestibulum id interdum urna. Praesent metus enim, euismod at dui eget, varius
sagittis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { width: 600px; }
h2 {
background-color: pink;
position: fixed;
top: 10px;
left: 50px;
}
</style>
</head>
<body>
<h2>Fixed positioning</h2>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.</p>
<p>Nulla eget varius tortor, a egestas risus. Nunc interdum commodo hendrerit. Aliquam
rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin. Duis leo neque,
porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac purus non fermentum.
Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac. Donec maximus
accumsan augue non efficitur. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sed nunc non ante viverra eleifend.
Maecenas egestas magna sit amet varius dictum.</p>
<p>Fusce dictum nisl ipsum, at dictum elit efficitur ut. Suspendisse cursus lorem et
maximus placerat. Donec lectus magna, fringilla vel orci a, condimentum mattis
tellus. Maecenas a sodales orci, vel iaculis nisi. Proin sagittis auctor sagittis.
Vestibulum id interdum urna. Praesent metus enim, euismod at dui eget, varius
sagittis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</body>
</html>
<!-- figure 12.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.sidebar {
width: 100px;
height: 300px;
margin: 10px;
background: pink;
position: fixed;
top: 55px;
left: 0px;
}
.content {
width: 500px;
height: 300px;
margin: 10px;
padding-left: 130px;
overflow: auto;
}
</style>
</head>
<body>
<h2>Fixed Company</h2>
<div class="content">
<div class="sidebar">Side Menu</div>
<p><h3>About us</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam
mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam
purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus
eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor
tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis
porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget
pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit
amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum
libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra
dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in
enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor
nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed
condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam,
accumsan id ultrices ultrices, tempor et tellus. </p>
</div>
</body>
</html>
<!-- figure 12.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.art1, .art2 { width: 600px; margin: 0px auto 20px auto;
background-color: lightgrey; padding: 15px; }
h2 {
background-color: lightblue;
border: 1px outset lightblue;
position: sticky;
top: 0px;
margin: 0px 0px 10px 0px;
padding: 10px;
}
</style>
</head>
<body>
<div class="art1">
<h2>Article One</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue leo
augue, et dictum eros rutrum a. Mauris tempor scelerisque urna ut viverra. In
dapibus et orci sit amet tincidunt. Phasellus ligula odio, faucibus eu vulputate
ut, malesuada a lorem. Curabitur nec ipsum lacus. Mauris consequat tortor
imperdiet, efficitur tortor id, aliquam felis. Proin varius non augue vel
efficitur. Fusce non nunc commodo, convallis risus sed, aliquam mauris.
Phasellus turpis tellus, tincidunt ac varius nec, tempor ac ante. Nulla
condimentum faucibus leo, interdum tristique enim rutrum eget. Nunc tincidunt
tristique pretium. Praesent fermentum et lorem eu laoreet. Nunc vitae felis nec
nibh sollicitudin mollis eget ut risus. Vestibulum vitae neque hendrerit enim
aliquam bibendum. Phasellus sed nibh vel urna aliquet suscipit. Vivamus at enim
pellentesque urna congue varius. Donec nisl mi, sagittis eget imperdiet nec,
laoreet at purus. Cras ante lacus, elementum ac odio sed, venenatis malesuada
nulla. Nam at tincidunt risus. Donec eget erat nec tellus volutpat tristique.
In ut auctor est, quis scelerisque nisl. Curabitur bibendum risus ac nisi
vestibulum volutpat. Etiam maximus, libero vel auctor pharetra, diam ligula
consequat nulla, in sodales urna nisl eu purus. Sed pretium sollicitudin felis
eu efficitur. Mauris nisl magna, pulvinar at nulla quis, euismod luctus diam.
Aliquam nec risus mauris. In at metus a ipsum laoreet dignissim. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aliquam vel diam nisl. Aliquam quis convallis felis. Interdum et malesuada fames
ac ante ipsum primis in faucibus. Integer aliquam est eu commodo venenatis.
</div>
<div class="art2">
<h2>Article Two</h2>
Nisi est sit amet facilisis magna etiam tempor orci. Sapien et ligula ullamcorper
malesuada proin libero nunc consequat interdum. Consequat nisl vel pretium lectus
quam id leo in vitae. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat.
Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Penatibus et magnis
dis parturient montes. Vel facilisis volutpat est velit egestas dui id. Tristique
magna sit amet purus gravida quis blandit. Id ornare arcu odio ut sem nulla
pharetra diam. Lacus vel facilisis volutpat est velit egestas dui id. Lacinia quis
vel eros donec ac odio tempor orci. Dapibus ultrices in iaculis nunc. Vivamus arcu
felis bibendum ut. Amet mattis vulputate enim nulla. Donec pretium vulputate sapien
nec sagittis aliquam malesuada bibendum. Diam maecenas sed enim ut sem viverra
aliquet eget. Gravida dictum fusce ut placerat orci. Duis convallis convallis
tellus id interdum velit laoreet id donec. Sit amet aliquam id diam maecenas
ultricies mi eget. Augue ut lectus arcu bibendum at varius. Neque vitae tempus
quam pellentesque nec nam aliquam. Mauris a diam maecenas sed enim ut sem. Maecenas
ultricies mi eget mauris. Non odio euismod lacinia at quis risus. Parturient montes
nascetur ridiculus mus mauris vitae ultricies leo integer. Adipiscing enim eu
turpis egestas pretium aenean. Id consectetur purus ut faucibus pulvinar elementum.
Purus faucibus ornare suspendisse sed nisi lacus. Lacus luctus accumsan tortor
posuere ac ut. Cras ornare arcu dui vivamus arcu felis bibendum ut. Lacus viverra
vitae congue eu consequat ac felis donec et. Leo a diam sollicitudin tempor. Sapien
pellentesque habitant morbi tristique senectus et. Nec sagittis aliquam malesuada
bibendum arcu vitae elementum curabitur vitae. Nunc lobortis mattis aliquam
faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti
nullam. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Sem
integer vitae justo eget magna. At tellus at urna condimentum mattis pellentesque
id nibh. Amet commodo nulla facilisi nullam vehicula. Posuere morbi leo molestie
at elementum eu facilisis sed. Mauris pellentesque pulvinar pellentesque habitant
morbi. Magna ac placerat vestibulum lectus mauris ultrices eros.
</div>
</body>
</html>
<!-- figure 12.14 & figure 12.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
width: 90%;
margin: 0 auto 0 auto;
}
header {
position: sticky;
top: 0px;
}
.logo {
height: 100px;
background-color: lightgrey;
text-align: center;
}
.logo h1 h1{
margin-top: 0;
padding-top: 30px;
}
nav ul {
margin: 0px;
padding: 0;
background-color: pink;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 25%;
}
nav ul li a {
display: block;
padding: 10px 0;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
background-color: violet;
color: white;
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1>The Web Company</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a>
<li><a href="#">About us</a>
<li><a href="#">Services</a>
<li><a href="#">Contact us</a>
</ul>
</nav>
</header>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor,
varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet hendrerit sapien,
non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra.
Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet, porttitor elit.
Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est.
Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra tellus a laoreet. Cras imperdiet enim
sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum,
iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis
bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum
ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue
urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Suspendisse suscipit in lectus at aliquet. Integer non sem enim. Vestibulum aliquam imperdiet laoreet. In malesuada sodales augue, ut
aliquam elit tempus id. Suspendisse sed hendrerit nibh. Curabitur molestie in libero nec vulputate. Cras ut scelerisque lacus, vitae
cursus dui. Fusce ultricies lectus tincidunt, congue elit interdum, pellentesque nunc.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a
lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum
enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu.
Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat
tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla
sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus
id felis aliquet fringilla.</p>
</div>
</body>
</html>
<!-- figure 12.17 & figure 12.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial; text-align: center; }
.menubar li {
display: inline-block;
background: yellow;
padding: 10px 20px;
cursor: pointer;
position: relative;
}
.menubar li a{ color: black; text-decoration: none; }
.part1 div:hover { background: orange; }
.menubar li ul{
display: none;
padding: 0;
bax-shadow: 2px 2px 2px #4d4d4d;
position: absolute;
top: 39px;
left: 0;
text-align: left;
}
.menubar li ul li{ background: orange; color: white; display: block; }
.menubar li ul li a{ color: white; white-space: nowrap; }
.menubar li:hover ul{ display: block; }
.menubar li ul li:hover{ background: grey; }
</style>
</head>
<body>
<ul class="menubar">
<li><a href="home.html">Home</a></li>
<li><a href="about_us.html">About us</a></li>
<li><a href="products.html">Products</a>
<ul class="dropdown_menu">
<li><a href="audio_software.html">Audio software</a></li>
<li><a href="virtual_instruments.html">Virtual instruments</a></li>
<li><a href="effect_modules.html">Effect modules</a></li>
</ul>
</li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</body>
</html>
<!-- figure 12.20 & figure 12.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Arial; text-align: center; padding: 0px; }
.menu { display: inline-block; position: relative; }
.menubar .menu a { text-decoration: none; color: black; }
button {
padding: 10px 20px;
margin-right: 1px;
border: none;
background: yellow;
cursor: pointer;
}
.menubar .menu div {
display: none;
box-shadow: 2px 2px 2px #4d4d4d;
position: absolute;
text-align: left;
background: orange;
}
.menubar .menu div a {
display: block;
white-space: nowrap #4d4d4d;
padding: 12ox 16px;
color: white;
}
.menubar .menu:hover button { background: orange; }
.menubar .menu:hover div { display: block; }
.menubar .menu div a:hover { background: grey; }
</style>
</head>
<body>
<div class="menubar">
<div class="menu">
<button><a href="home.html">Home</a></button>
</div>
<div class="menu">
<button><a href="about_us.html">About us</a></button>
</div>
<div class="menu">
<button><a href="products.html">Products</a></button>
<div>
<button><a href="audio_software.html">Audio software</a></button>
<button><a href="virtual_instruments.html">Virtual instruments</a></button>
<button><a href="effect_modules.html">Effect modules</a></button>
</div>
</div>
<div class="menu">
<button><a href="downloads.html">Downloads</a></button>
</div>
<div class="menu">
<button><a href="contact.html">Contact us</a></button>
</div>
</div>
</body>
</html>
<!-- figure 12.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.bar {
width: 550px;
height: 120px;
background: grey;
opacity: 0.9;
position: absolute;
left: 10px;
top: 110px;
z-index: 2;
}
.peg1 {
width: 120px; height: 200px; background: gold; opacity: 0.9;
position: absolute; left: 65px; top: 70px; z-index: 3;
}
.peg2 {
width: 120px; height: 200px; background: gold; opacity: 0.9;
position: absolute; left: 225px; top: 70px; z-index: 3;
}
.peg3 {
width: 120px; height: 200px; background: gold; opacity: 0.9;
position: absolute; left: 385px; top: 70px; z-index: 1;
}
</style>
</head>
<body>
<h2>z-index</h2>
<span class="bar">z-index: 2;</span>
<span class="peg2">z-index: 1;</span>
<span class="peg2">z-index: 3;</span>
<span class="peg3">z-index: 1;</span>
</body>
</html>
<!-- figure 12.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
blockquote {
width: 200px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 10px;
background-color: #ffc0cb;
font-style: italic;
float: right;
}
figure {
margin: 0px 10px 0px 0px;
font-style: italic;
float: left;
}
</style>
</head>
<body>
<h2>Contents floated right and left</h2>
<blockquote>"Suspendisse cursus lorem et maximus placerat."</blockquote>
<p>In quis nibh eget nisl pharetra varius. Mauris eget velit turpis. Vivamus erat
mauris, pretium pharetra risus eget, ornare rutrum tortor. In sollicitudin congue
porttitor. Nunc ante sem, vehicula sit amet feugiat nec, pharetra vitae velit.
Suspendisse nec ipsum congue, fermentum dolor elementum, volutpat dolor. Vivamus
lobortis id erat ac scelerisque.
<figure>
<img src="images/rabbit.png" alt="The rabbit" width="80" height="80">
<figcaption>The rabbit</figcaption>
</figure>
<p>Nulla eget varius tortor, a egestas risus. Nunc interdum commodo hendrerit.
Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin. Duis
leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac
purus non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum
ac. Donec maximus accumsan augue non efficitur. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sed nunc
non ante viverra eleifend. Maecenas egestas magna sit amet varius dictum.</p>
<p>Morbi eget sem feugiat, pretium velit in, vehicula elit. Sed suscipit mi eu
lorem ultrices fringilla. Integer tempus dapibus dui, a pharetra eros aliquet
sed. Phasellus elementum neque enim, et sagittis mauris posuere a. Curabitur
non purus ut orci facilisis facilisis nec id ligula. Mauris quis ipsum sit amet
ligula congue gravida. Donec porta dui erat, non tristique nibh lobortis ut.</p>
</body>
</html>
<!-- figure 12.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 800px; }
b { font-size: 24px; }
p {
width: 220px;
margin: 5px;
padding: 5px;
background-color: #ffc0cb;
float: left;
}
</style>
</head>
<body>
<h2>Floating element obstruction</h2>
<p><b>1.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p><b>2.</b><br>Pellentesque dictum elementum augue sit amet eleifend. Vestibulum
iaculis dolor ac auctor dapibus. Etiam rhoncus malesuada ipsum. Cras finibus ornare
arcu luctus fringilla. </p>
<p><b>3.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p class="clear"><b>4.</b><br>Integer at dignissim quam, non fringilla est. Aenean sed
risus eros. Quisque pulvinar aliquet quam, nec dapibus nisi varius id. Praesent
fringilla est enim, fringilla laoreet nisl suscipit in. </p>
<p><b>5.</b><br>Cras mauris lacus, pulvinar non condimentum ut, vulputate a ex.
Suspendisse lacinia tristique tincidunt. Morbi fermentum pulvinar orci, vitae
imperdiet lectus laoreet sollicitudin.</p>
<p><b>6.</b><br>vamus non nisi nec orci cursus faucibus sed non sapien.
Vivamus consequat condimentum purus, vel tincidunt justo commodo et. Mauris eget
tortor blandit, rhoncus tellus a, fringilla est. </p>
</body>
</html>
<!-- figure 12.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 800px; }
b { font-size: 24px; }
p {
width: 220px;
margin: 5px;
padding: 5px;
background-color: #ffc0cb;
float: left;
}
.clearfix { clear: left; }
</style>
</head>
<body>
<h2>Floating element obstruction solved</h2>
<p><b>1.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p><b>2.</b><br>Pellentesque dictum elementum augue sit amet eleifend. Vestibulum
iaculis dolor ac auctor dapibus. Etiam rhoncus malesuada ipsum. Cras finibus ornare
arcu luctus fringilla. </p>
<p><b>3.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida sit
amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo blandit at.
Ut vulputate auctor interdum.</p>
<p class="clear"><b>4.</b><br>Integer at dignissim quam, non fringilla est. Aenean sed
risus eros. Quisque pulvinar aliquet quam, nec dapibus nisi varius id. Praesent
fringilla est enim, fringilla laoreet nisl suscipit in. </p>
<p><b>5.</b><br>Cras mauris lacus, pulvinar non condimentum ut, vulputate a ex.
Suspendisse lacinia tristique tincidunt. Morbi fermentum pulvinar orci, vitae
imperdiet lectus laoreet sollicitudin.</p>
<p><b>6.</b><br>vamus non nisi nec orci cursus faucibus sed non sapien.
Vivamus consequat condimentum purus, vel tincidunt justo commodo et. Mauris eget
tortor blandit, rhoncus tellus a, fringilla est. </p>
</body>
</html>
<!-- figure 12.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { width: 750px; }
b { font-size: 24px; }
div { border: 1px solid black; }
p {
width: 220px;
margin: 5px;
padding: 5px;
background: #ffc0cb;
float: left;
}
</style>
</head>
<body>
<h2>Collapsed parent-element problem</h2>
<div>
<p><b>1.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida
sit amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo
blandit at. Ut vulputate auctor interdum.</p>
<p><b>2.</b><br>Pellentesque dictum elementum augue sit amet eleifend. Vestibulum
iaculis dolor ac auctor dapibus. Etiam rhoncus malesuada ipsum. Cras finibus ornare
arcu luctus fringilla. </p>
<p><b>3.</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit pellentesque lectus in fermentum. Proin ut sapien metus. Morbi gravida
sit amet tortor eu ultrices. Phasellus luctus commodo neque, at malesuada leo
blandit at. Ut vulputate auctor interdum.</p>
</body>
</body>
</html>
<!-- figure 12.33 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.one, .two, .three {
width: 250px;
float: left;
margin: 0px 10px 0px 5px;
}
</style>
</head>
<body>
<h2>Multi-column layout with float</h2>
<div class="one">In quis nibh eget nisl pharetra varius. Mauris eget velit turpis.
Vivamus erat mauris, pretium pharetra risus eget, ornare rutrum tortor. In
sollicitudin congue porttitor. Nunc ante sem, vehicula sit amet feugiat nec,
pharetra vitae velit. Suspendisse nec ipsum congue, fermentum dolor elementum,
volutpat dolor. Vivamus lobortis id erat ac scelerisque.</div>
<div class="two">Nulla eget varius tortor, a egestas risus. Nunc interdum commodo
hendrerit. Aliquam rutrum ligula elit, vitae efficitur dolor ultrices sollicitudin.
Duis leo neque, porttitor id laoreet ac, imperdiet vel leo. Vivamus mollis ac
purus non fermentum. Fusce mattis sagittis enim, tincidunt pretium enim rutrum ac.
Donec maximus accumsan augue non efficitur. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. </div>
<div class="three">Morbi eget sem feugiat, pretium velit in, vehicula elit. Sed
suscipit mi eu lorem ultrices fringilla. Integer tempus dapibus dui, a pharetra eros
aliquet sed. Phasellus elementum neque enim, et sagittis mauris posuere a. Curabitur
non purus ut orci facilisis facilisis nec id ligula. Mauris quis ipsum sit amet ligula
congue gravida. Donec porta dui erat, non tristique nibh lobortis ut. </div>
</body>
</html>
<!-- figure 12.35 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
columns: 3 100px;
-webkit-columns: 3 100px; /* Chrome, Safari, Opera */
-moz-columns: 3 100px; /* Firefox */
}
.article1 {
column-span: none;
-webkit-column-span: none; /* Chrome, Safari, Opera */
-moz-column-span: none; /* Firefox */
}
.article2 {
column-span: all;
-webkit-column-span: all; /* Chrome, Safari, Opera */
-moz-column-span: all; /* Firefox */
}
</style>
</head>
<body>
<div>
<h2 class="article1">This heading uses a setting of "none" for column-span</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut felis ullamcorper
ante ullamcorper auctor. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Ut vel pulvinar eros. Sed a malesuada
risus. Donec vitae turpis ut massa ullamcorper dapibus. Donec elementum purus
lectus, at posuere eros tristique et. Nulla lobortis interdum tincidunt. Aliquam
iaculis magna at mollis tincidunt. Pellentesque iaculis risus eu nisi viverra
semper. Suspendisse libero ex, semper in enim vitae, posuere aliquam ante. Proin
congue ac lacus ac placerat. Morbi eu tempus sapien. Ut congue risus odio, eu
tempor felis mattis id. Praesent sollicitudin, augue non interdum fringilla, magna
tortor tristique tellus, in varius tortor sem at diam.
</div>
<div>
<h2 class="article2">This heading uses a setting of "all" for column-span</h2>
Aenean suscipit accumsan elit, non bibendum magna fringilla a. Pellentesque mollis
metus massa, congue pretium velit ornare vel. Sed varius fringilla quam vitae
mollis. Vestibulum lobortis sit amet lectus non efficitur. Ut consequat ligula ut
lacus varius, eget iaculis purus tincidunt. Phasellus tristique interdum turpis.
In in pulvinar sapien, ut malesuada nisl. Quisque lobortis, mauris venenatis
vehicula tristique, odio magna convallis nisi, vel lacinia dui sapien eget diam.
Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Duis dictum leo ac odio dapibus, non consequat
purus iaculis. Donec placerat magna ac ultricies varius.Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae.
</div>
</body>
</html>
<!-- figure 12.37 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-gap: 25px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
column-rule: 2px solid #0000ff;
-webkit-column-rule: 2px solid #0000ff;
-moz-column-rule: 2px solid #0000ff;
}
</style>
</head>
<body>
<div>
<h3>Investigationes demonstraverunt lectores</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt
lectores legere me lius quod ii legunt saepius.
</body>
</body>
</html>
<!-- figure 12.39 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-rule: 2px solid #0000ff;
-moz-column-rule: 2px solid #0000ff;
-webkit-column-rule: 2px solid #0000ff;
}
.article1 {
column-fill: auto;
-moz-column-fill: auto;
}
.article2 {
column-fill: balance;
-moz-column-fill: balance;
}
</style>
</head>
<body>
<h2>Investigationes demonstraverunt lectores</h2>
<div class="article1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<br>
<h2>Investigationes demonstraverunt lectores</h2>
<div class="article2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</body>
</html>