<div class="wrapper">
  <div class="content">
    <h1>Past layout</h1>
  <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>
  <div class="sidebar">
    <p>Absolutely positioned sidebar.</p>
  </div>
</div>
body {
  width: 900px;
  margin: 0 auto;
  padding: 2em;
  font: 125% "Open sans", sans-serif;
}

h1 {
  margin: 0;
}

.wrapper {
  position: relative;
}

.content {
  margin-left: 200px;
}

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  background-color: rgb(71, 73, 84);
  color: #fff;
  padding: 10px;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans|Proza+Libre&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.