Layout techniques
Tags: css, frontenddeveloper
Published: 2020-05-14 07:53:14

---
title: Layout techniques
published: true
date: 2020-05-10 09:19:00 UTC
tags: CSS,Front-end developer
canonical_url: https://drmsite.blogspot.com/2020/05/layout-techniques.html
---

[![](https://4.bp.blogspot.com/-QOaKkp_oI6c/XrfG8rJOo7I/AAAAAAAAmcM/fAQB2xCPJXEs93xfZS-377vt0HWRa-voQCLcBGAsYHQ/s640/black_metal_spiral_staircase-scopio-65b88126-cc6e-4f99-a5c8-fd6ac35666d4.jpg)](https://4.bp.blogspot.com/-QOaKkp_oI6c/XrfG8rJOo7I/AAAAAAAAmcM/fAQB2xCPJXEs93xfZS-377vt0HWRa-voQCLcBGAsYHQ/s1600/black_metal_spiral_staircase-scopio-65b88126-cc6e-4f99-a5c8-fd6ac35666d4.jpg)
<link href="https://fonts.googleapis.com/css?family=Barlow&amp;display=swap" rel="stylesheet"><label style="display:flex; justify-content: start; align-items: center; font-family: Barlow"><a style="display:flex; align-items: center" href="https://scop.io"><img style="margin: 0px 10px 0px 0px" src="https://cdn.shopify.com/s/files/1/2395/7099/t/46/assets/icon_2x.png?v=17766308506443902960" height="20x"></a> By <a style="text-decoration: none; margin: 0px 5px;" href="https://scop.io/collections/vendors?q=Solanki+Bhowmick">Solanki Bhowmick</a></label>

You're all lucky bleeders! You are! [These are the days of miracle and wonder (And don't cry baby, don't cry)](https://www.youtube.com/watch?v=Uy5T6s25XK4). 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](https://drmsite.blogspot.com/2005/12/rounded-corners-with-tables.html). 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 <abbr title="Internet Explorer">IE</abbr>.

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](https://www.amazon.co.uk/Front-End-Developer-BCS-Guides-Roles/dp/1780174764/), 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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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
```html
<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](https://dev.to/mouseannoying/user-test-updated-57fn-temp-slug-5530256) 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](https://dev.to/mouseannoying/grid-area-in-vuejs-gh5).