Div Positioning

by Michael Wagner

HTML

<div class="row">
	<div class="col col-1">
	
	</div>

	<div class="col col-2">
		<div class="items">
			<div class="item item-1">1</div>
			<div class="item item-2">2</div>
    </div>
    <div class="items right">
			<div class="item item-3">3</div>
			<div class="item item-4">4</div>
    </div>
	</div>

	<div class="col col-3">
    <div class="item item-5">5</div>
  </div>
</div>

CSS

body { background:#a6a6a6;} 

.col {
	background-color: #ccc;
	border: 1px solid black;
	float: left;
	width: 128px;
	height: 210px;
	margin-right: 10px;
	position: relative;
  padding: 1% 0;
}

.col.col-1 { 
  width: 128px;
  height:128px;
}

.col.col-2 { 
  border: dashed 2px navy;
  box-sizing: border-box;
}

.col.col-3 { 
  width: 64px;
  height:64px;
  margin-top:60px;
} 

.items {
  width: 50%;
  position: relative;
  float: left;
}

.right {
  top: 32%;
}

.item {
  width: 55px;
  height: 55px;
  margin: 5px;
  background: red;
  border: 1px solid grey;
  box-sizing: border-box;
  text-align:center;
  position: relative;
}

.col.col-3 {
  position: relative; 
}
.item.item-5 {
  position: absolute;
  top: 100%;
  
}