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>