<div style="width: 500px;">
  <div style="float: left; background-color: red; height: 100px; width: 100px;"></div>
  <div style="float: right; background-color: red; height: 100px; width: 100px;"></div>
  <div style="float: left; background-color: green; height: 150px; width: 60px; margin-left: -80px;"></div>
  <div style="float: left; background-color: blue; height: 50px; width: 40px; margin-left: -100px;"></div>
  <div style="float: left; background-color: brown; height: 30px; width: 30px;"></div>
  <div style="float: right; background-color: green; height: 150px; width: 60px; margin-right: -80px"></div>
  <div style="float: right; background-color: blue; height: 50px; width: 40px; margin-right: -100px"></div>
  <div style="float: right; background-color: brown; height: 30px; width: 30px;"></div>
</div>