You're right that it could have been easier. Since you designed the top, middle, and bottom <div>s to exactly fit in the container <div>, you could have avoided adding any position rules to them because, barring other issues, they would have stacked themselves within the container. What are those other issues? Anything that would cause the browser to allocate document space in addition to the 'width' and 'height' attributes, such as 'margin', 'padding', 'border', and internal elements whose margins extend beyond the <div>'s bounding box. So, you could have used:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Contained Boxes Demo</title>
<meta charset='utf-8'>
<style>
* { margin:0; padding:0; border:0; outline:0; font-family:arial,sans-serif; }
h1 { text-align:center; }
.container {
width: 100px;
height: 180px;
margin-top: 15px;
margin-left:15px;
}
.top {
width: 100px;
height: 60px;
background: #F00;
}
.middle {
width: 100px;
height: 60px;
background: #0F0;
}
.bottom {
width: 100px;
height: 60px;
background: #FF0;
}
</style>
</head>
<body>
<h1>Bounded Boxes</h1>
<br>
<div class="container">
<div class="top">Top.</div>
<div class="middle">Middle.</div>
<div class="bottom">Bottom.</div>
</div>
</body>
</html>
