<div class="wrap">
  <div class="clearfix"> <!-- 親 -->
    <div class="hidari">完</div> <!-- 子供 -->
    <div class="migi">成</div> <!-- 子供 -->
  </div>
</div>
<footer>フッター</footer>
  
.wrap {
  text-align:center;
   background-color:yellow;
  width:120px;
  height:50px;
  margin:0 auto;
}
.hidari {
  width:50px;
  height:50px;
  background-color:red;
  float:left;
}
.migi {
  width:50px;
  height:50px;
  background-color:blue;
  float:right;
}
footer {
  width:120px;
  height:50px;
  background-color:black;
  color:white;
  margin:0 auto;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.