# Positioning - Exercise

Positioning - Exercise

# Positioning

Duration: 15 to 25 minutes.

In this exercise, you will build a house from its individual parts using CSS positioning.

1. Open PositioningAndVisibility/Exercises/Positioning.html in your browser. It will look like this:
2. Your job is to build the house in the center of the green box. It will take some trial and error.
3. Open PositioningAndVisibility/Exercises/Positioning.html in your editor and begin working. The code is shown below:

## Code Sample:

PositioningAndVisibility/Exercises/Positioning.html
<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<title>Building a House</title>
<style type="text/css">
#plot {
/* For centering the plot */
/* Using relative positioning */
position: relative;
margin: 10px auto 0px auto;
/* For centering the plot */
/* Using absolute positioning */
/*position: absolute;
left: 50%;
margin-left: -250px;*/
width: 500px;
height: 500px;
border: 1px solid #060;
}
</style>
<body>
<div id="wrapper">
<div id="plot">
<img id="main" src="Images/main.png" alt="main">
<img id="roof" src="Images/roof.png" alt="roof">
<img id="chimney" src="Images/chimney.png" alt="chimney">
<img id="door" src="Images/door.png" alt="door">
<img id="window" src="Images/window.png" alt="window">
</div>
</div>
</body>
</html>

## Challenge

1. If you used absolute positioning, try doing it again with relative positioning.
2. If you used relative positioning, try doing it again with absolute positioning.

## Challenge

1. Find grass.jpg in the PositioningAndVisibility/Exercises/Images folder.
2. Use it to put your house in a nice new yard.

## Solution:

PositioningAndVisibility/Solutions/PositioningAbsolute.html
---- C O D E   O M I T T E D ----
#main {
position:absolute;
top:150px;
left:50px;
}

#roof {
position:absolute;
top:60px;
left:34px;
}

#chimney {
position:absolute;
top:65px;
left:261px;
}

#door {
position:absolute;
top:242px;
left:353px;
}

#window {
position:absolute;
top:296px;
left:129px;
}
---- C O D E   O M I T T E D ----

## Solution:

PositioningAndVisibility/Solutions/PositioningRelative.html
---- C O D E   O M I T T E D ----
#main {
position:relative;
top:149px;
left:50px;
}

#roof {
position:relative;
top:-279px;
left:34px;
}

#chimney {
position:relative;
top:-695px;
left:261px;
}

#door {
position:relative;
top:-418px;
left:275px;
}

#window {
position:relative;
top:-443px;
left:-12px;
}
---- C O D E   O M I T T E D ----