Exercise 5.1
<!DOCTYPE html>
<html>
<head><title>Chapter 5 - Positioning</title>
<style type="text/css">
#box1 {
background-color: green;
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
#box2 {
background-color: red;
width: 50px;
height: 50px;
padding: 20px;
border: 5px dotted black;
margin: 10px;
}
p {
}
</style></head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<p>This is some text added to demonstrate the concept of overlapping.</p>
</body></html>
Exercise 5.2
<!doctype html>
<html>
<head><title>Chapter 5 - Floating</title>
<style type="text/css">
div {
padding: 10px;
border: 1px dashed black;
margin: 5px;
float: left;
}
#box1 {
width: 60px;
height: 100px;
}
#box2 {
width: 100px;
height: 20px;
}
#box3 {
width: 50px;
height: 150px;
}
#box4 {
width: 20px;
height: 50px;
}
#box5 {
width: 150px;
height: 120px;
}
#box6 {
width: 120px;
height: 70px;
}
#box7 {
width: 25px;
height: 80px;
}
</style></head>
<body>
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
<div id="box4">Box 4</div>
<div id="box5">Box 5</div>
<div id="box6">Box 6</div>
<div id="box7">Box 7</div>
</body></html>