<body>
  <header>
    <h1>Franklin Running Club</h1>
  </header>
  <div class="container">
    <main class="main">
      <h2>Come join us!</h2>
      <p>
        The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your own pace.
      </p>
    </main>
    <aside class="sidebar">
      <div class="widget"></div>
      <div class="widget"></div>
    </aside>
  </div>
</body>
body {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}

header {
  color: #fff;
  background-color: #0072b0;
  border-radius: 0.5em;
}

.main {
  box-sizing: border-box;
  
  /* 使用 float 来将两个 block element 弄成一行 */
  float: left;
  /* 分比例 */
  width: 80%;
  
  background-color: #fff;
  border-radius: .5em;
}

.sidebar {
  box-sizing: border-box;
  
  /* 使用 float 来将两个 block element 弄成一行 */
  float: left;
  
  /* Gutter */
  width: calc(20% - 1.5em);
  margin-left: 1.5em;
  
  /*
   * 可行但是没那么 consistent 的方案
   * width: 19%;
   * margin-left: 1%;
   */
  
  padding: 1.5em;
  background-color: #fff;
  border-radius: .5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.