You're all lucky bleeders! You are! These are the days of miracle and wonder (And don't cry baby, don't cry). When I started, I was using tables for layouts and thinking they were the best thing since sliced bread - how could they ever be beat? I even, and this shames me significantly, spent a fair amount of time figuring out how to do rounded corners using tables. That's from 2005, don't you know! Don't blame me for the errors in my youth; even then I had to code things for IE.

I did make a foray into float-based layouts, but since that time I stopped worrying and offloaded the heavy lifting to frameworks for a few years. Until, that is, that last few years when CSS frameworks started to feel a little constraining.

So, in my first book, I took a wander through the different ways of creating a layout. And let me tell you, there are ever-so-many options now!

These are the methods I discuss:

Table based

<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <td colspan="2" style="padding: 0; background: grey; height: 20px;"></td>
  </tr>
  <tr>
    <td style="padding: 0; background: gainsboro; height: 50px; width: 25%;"></td>
    <td style="padding: 0; background: black; width: 75%;"></td>
  </tr>
  <tr>
    <td colspan="2" style="padding: 0; background: darkgray; height: 20px;"></td>
  </tr>
</table>

Float based

<div style="background: grey; height: 20px;"></div>
<div style="background: gainsboro; height: 50px; width: 25%; float: left;"></div>
<div style="background: black; height: 50px; width: 75%; float: right;"></div>
<div style="background: darkgrey; height: 20px; clear: both;"></div>

Float based with wrapper

<div style="background: grey; height: 20px;"></div>
<div style="overflow: hidden;">
  <div style="background: gainsboro; height: 50px; width: 25%; float: left;"></div>
  <div style="background: black; height: 50px; width: 75%; float: right;"></div>
</div>
<div style="background: darkgrey; height: 20px; clear: both;"></div>

Position based

<div style="position: relative; height: 90px;">
  <div style="background: grey; height: 20px; position: absolute; top: 0; left: 0; width: 100%;"></div>
  <div style="background: gainsboro; height: 50px; position: absolute; width: 25%; top: 20px; left: 0;"></div>
  <div style="background: black; height: 50px; position: absolute; width: 75%; top: 20px; right: 0;"></div>
  <div style="background: darkgrey; height: 20px; position: absolute; width: 100%; top: 70px; right: 0;"></div>
</div>

CSS table based

<div style="background: grey; height: 20px;"></div>
<div style="display: table; width: 100%;">
  <div style="background: gainsboro; height: 50px; display: table-cell; width: 25%;"> </div>
  <div style="background: black; display: table-cell; width: 75%;"> </div>
</div>
<div style="background: darkgrey; height: 20px;"> </div>

Flexbox based

<div style="display: flex; flex-direction: column; height: 90px">
  <div style="background: grey; flex: 2;"></div>
  <div style="flex: 5; display: flex;">
    <div style="background: gainsboro; flex: 1;"></div>
    <div style="background: black; flex: 3;"></div>
  </div>
  <div style="background: darkgrey; flex: 2;"></div>
</div>

Grid based

<div style="display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 20px 50px 20px;">
  <div style="background: grey; grid-column: 1 / 5; grid-row: 1;"></div>
  <div style="background: gainsboro; grid-column: 1; grid-row: 2;"></div>
  <div style="background: black; grid-column: 2 / 5; grid-row: 2;"></div>
  <div style="background: darkgrey; grid-column: 1 / 5; grid-row: 3;"></div>
</div>

The examples above are different from those in the book because... reasons. I guess that after spending hours and hours staring at them, I've clocked that they could be better, and I've refactored them as a result. The same happened yesterday when I spent hours looking at an experiment from the book.

I've been doing this professionally for something like a decade now, so if I'm not allowed to go back and look at old code and scream like a little girl then Yah, boo, hiss! Of course, the opposite is true, and rarely I'll come across some old code and be blown away at its elegance.

I guess the point of this post though is to remind older, fusty developers (hands-up!) that they don't need to deal with the vagueries of IE6 anymore and can start to embrace some of this new-fangled CSS that's, actually, been around for quite a while! That's not to say that the above will work out-of-the-box on IE11. It's got a dodgy implementation of CSS Grid - but there are ways around that.

Layout techniques