<article role="main">
  <div class="content">
    <h1>
      A layout using floats
    </h1>
    <p>
      The main content area is 70% wide.
    </p>
    <p>
      Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
    </p>
    <p>
      Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
    </p>
  </div>
  <aside>
    <p>
      The sidebar is 27% wide.
    </p>
  </aside>
</article>
/* Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

/* CSS files add styling rules to your content */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 0;
  padding: 1em;
}

* {
  box-sizing: border-box;
}

article {
  max-width: 940px;
  padding: 10px;
  border-radius: 4px;
}

article::after {
  content: "";
  clear: both;
  display: block;
}

.content {
  float: right;
  width: 70%;
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 10px;
}

aside {
  float: left;
  width: 27%;
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.