<div class="container">
  <div class="box purple"></div>
  <div class="box blue"></div>
</div>
<p>This paragraph should be below the two floated boxes</p>

.container{
  max-width: 600px;
  margin: 0 auto;
  border: 2px solid red;
}

/*
4 Boxes at 25% each fills the container
*/
.box{
  width: 25%;
  height: 100px;
  float: left
}

/*
Properly calculates the height of the containing element with elements floated inside.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


.purple{
  background: purple;
}
.blue{
  background: blue;
  float: right;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.