<h2>Parent with <code>display: block</code></h2>
<div class="parent"><div class="child"><p>Child Element</p></div></div>

<h2>Parent with <code>display: inline-block</code></h2>
<div class="parent ib"><div class="child"><p>Child Element</p></div></div>

<h2>Parent with <code>float: right</code></h2>
<div class="parent float"><div class="child"><p>Child Element</p></div></div>
body {
  font-family: Lato;
  margin: 10px;
  font-size: 1.4em;

h2 {
  font-size: 1.1em;

br {
  clear: both;

.parent {
  background: orange;
  height: 200px;
  border: 1px solid orange;
  display: block;
  margin-bottom: 2em;

.child {
  width: 50%;
  background: black;
  padding: 10px;
  color: white;
  text-align: center;
  margin: 1em auto;

.ib {
  display: inline-block;

.float {
  float: right;
  width: 50%;

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.