<!-- Header -->
<header class="header">Header</header>

<!-- 
When we float elements
We need a container with clearfix
-->
<div class="container clearfix">

  <!-- Main Content -->
  <section class="main-content">Main Content</section>

  <!-- Sidebar -->
  <aside class="sidebar">Sidebar</aside>
</div>


<!-- Footer -->
<footer class="footer">Footer</footer>
/*
Assign a background color to
.header
.main-content
.sidebar
.footer
*/
.header,
.main-content,
.sidebar,
.footer{
  background: #72C2FF;
  margin: 2px 0;
}


/*
Set visual heights to visualize
*/
.header{
  height: 60px;
}

.main-content{
  height: 160px;
}

.sidebar{
  height: 100px;
}

.footer{
  height: 40px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.