<header>
  ヘッダー
</header>
<div id="contents" class="clearfix">
  コンテンツ
  <div>
    <aside>
      サイドバー
      <p>高さを加えます</p>
    </aside>
    <article>
      本文
    </article>
  </div>
</div>
<footer>
  フッター
</footer>
* {
  font-size: 20px;
  line-height:2em;
}
header {
  background-color: #ffdddd;
}
div#contents {
  background-color: #ddffdd;
  padding: 0 10px;
}
footer {
  background-color: #ddddff;
}
aside {
  background-color: #ffddff;
  width: 50%;
  float: left;
}
article {
  background-color: #ddffff;
  width: 50%;
  float: left;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.