<h1>Adaptive design</h1>
<article>
  <p>When media queries arrived in CSS it opened the door to making layouts more flexible. But developers were still most comfortable making fixed-width layouts. One technique involved switching between a handful of fixed-width layouts at specified widths.</p>
  <p>This allowed designers to provide layouts that looked good at a few different sizes but the design never looked quite right when viewed <em>between</em> those sizes. The problem of excess space persisted although it wasn’t as bad as in a fixed-width layout.</p>
</article>
<aside>
  <p>Ultimately this technique wasn’t very popular. The term “adaptive” was also used to refer to other approaches so it can be a confusing descriptor for what was quite a niche technique.</p>
  <p>This example is using the CSS <code>float</code> property to create columns. That was a popular technique before CSS grid or flexbox existed.</p>
</aside>

body {
  font-family: sans-serif;
  line-height: 1.5;
  padding: 0 16px;
}

h1 {
  margin-bottom: 0;
}

@media all and (min-width: 800px) {
  article {
    width: 540px;
    float: left;
  }
  
  aside {
    width: 250px;
    float: left;
    margin-left: 10px;
  }
}

@media all and (min-width: 1200px) {
  article {
    width: 800px;
    float: left;
  }
  
  aside {
    width: 350px;
    float: left;
    margin-left: 50px;
  }
}

@media all and (min-width: 1600px) {
  h1 {
    width: 400px;
    float: left;
  }
  
  article {
    width: 800px;
    float: left;
  }
  
  aside {
    width: 350px;
    float: left;
    margin-left: 50px;
  }
}