<h1>floatを使った横並び</h1>

<header>
  ヘッダー
</header>
<div id="contents" class="clearfix">
    <aside>
      サイドバー
    </aside>
    <article>
      本文
    </article>
</div>
<footer>
  フッター
</footer>
* {
  font-size: 20px;
  line-height:2em;
}
header {
  background-color: #eee;
}
footer {
  background-color: #eee;
}
aside {
  background-color: lightpink;
  width: 50%;
  float:left;
}
article {
  background-color: lightblue;
  width: 50%;
  float:left;
}

.clearfix {
    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.