<!-- 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>
/*
Properly calculates the height of the containing element with elements floated inside.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*
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;
}


/*
At 400px wide float the main content and sidebar beside eachother
*/
@media screen and (min-width: 400px){
  .main-content{
    width: 70%;
    float: left;
  }
  .sidebar{
    width: 29%;
    float: right;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.