sethladd/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="styles.css" rel="stylesheet">
</head>

<body>
  <header>Top Nav</header>
  <div class="layout-body">
    <main>
      <h1>This is the main content</h1>
      <p>
        Lorem ipsum dolor sit amet, ne vix utinam luptatum facilisis. In mollis aliquid fierent usu. Ex ubique liberavisse qui, pro
        ne rebum tamquam. Ad usu tale ponderum sapientem, sed agam audiam et, diam virtute eum ut. Mei ea oporteat verterem,
        nec te utamur latine commodo, appareat tractatos scribentur his ad.
      </p>
      <p>
        Nec graecis eligendi eu. Mea ad saepe consectetuer, mel civibus fastidii eu. Diam probo argumentum vel ad, an diam denique
        ius. Nihil legimus interesset ad sea, alienum deleniti antiopam vix ut, per in solet concludaturque. Assum cetero
        pri ne, oblique admodum volutpat duo ex, ne mel option utroque democritum.
      </p>
      <p>
        Vim causae atomorum necessitatibus ei. Vim te splendide abhorreant, cu prima ceteros iudicabit cum. Te feugait deseruisse
        eos. Nec ad mundi denique, duo modus gloriatur repudiandae eu. Duis dictas an eum.
      </p>
      <p>
        Usu modus idque accusam ea, ne enim fugit aliquid mei, eos ex probo detraxit. Eu usu menandri perpetua, diam accusata eloquentiam
        eu vel. Eum in phaedrum sententiae consetetur, mundi viderer in vix. At qui eripuit volutpat ullamcorper, postea
        interesset cu cum. Assum mediocrem similique at pri, eu cum dicam sententiae, ne decore tamquam quo.
      </p>
      <p>
        Sea propriae comprehensam eu, adhuc melius senserit qui ad. Vim volumus corpora at, et per dico accusam. Cu simul explicari
        argumentum vel. No veri choro ornatus duo.
      </p>
    </main>
    <nav class="left-nav">
      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>
    </nav>
    <aside class="right-toc">
      <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ol>
    </aside>
  </div>
  <footer>
    <div>
      Footer one
    </div>
    <div>
      Footer two
    </div>
    <div>
      Footer three
    </div>
  </footer>
</body>

</html>

## styles.css
html, body {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header, footer {
  flex: none; /* 2 */
  background-color: yellow;
  display: flex;
  flex-flow: row wrap;
}

header {
  position: fixed;
  width: 100%;
  height: 36px;
}

footer {
  justify-content: space-around;
  padding: 64px 16px 64px 16px;
}

.layout-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-top: 36px;
}

main {
  flex: 1;
}

.left-nav, .right-toc {
  flex: 0 0 auto;
}

.left-nav {
  /* put the nav on the left */
  order: -1;
}

@media (min-width: 768px) {
  .layout-body {
    flex-direction: row;
  }
  main {
    flex: 1;
  }
  .left-nav, .right-toc {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
  }
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<link href="styles.css" rel="stylesheet">
	</head>

	<body>
	<header>Top Nav</header>
	<div class="layout-body">
	<main>
	<h1>This is the main content</h1>
	<p>
	Lorem ipsum dolor sit amet, ne vix utinam luptatum facilisis. In mollis aliquid fierent usu. Ex ubique liberavisse qui, pro
	ne rebum tamquam. Ad usu tale ponderum sapientem, sed agam audiam et, diam virtute eum ut. Mei ea oporteat verterem,
	nec te utamur latine commodo, appareat tractatos scribentur his ad.
	</p>
	<p>
	Nec graecis eligendi eu. Mea ad saepe consectetuer, mel civibus fastidii eu. Diam probo argumentum vel ad, an diam denique
	ius. Nihil legimus interesset ad sea, alienum deleniti antiopam vix ut, per in solet concludaturque. Assum cetero
	pri ne, oblique admodum volutpat duo ex, ne mel option utroque democritum.
	</p>
	<p>
	Vim causae atomorum necessitatibus ei. Vim te splendide abhorreant, cu prima ceteros iudicabit cum. Te feugait deseruisse
	eos. Nec ad mundi denique, duo modus gloriatur repudiandae eu. Duis dictas an eum.
	</p>
	<p>
	Usu modus idque accusam ea, ne enim fugit aliquid mei, eos ex probo detraxit. Eu usu menandri perpetua, diam accusata eloquentiam
	eu vel. Eum in phaedrum sententiae consetetur, mundi viderer in vix. At qui eripuit volutpat ullamcorper, postea
	interesset cu cum. Assum mediocrem similique at pri, eu cum dicam sententiae, ne decore tamquam quo.
	</p>
	<p>
	Sea propriae comprehensam eu, adhuc melius senserit qui ad. Vim volumus corpora at, et per dico accusam. Cu simul explicari
	argumentum vel. No veri choro ornatus duo.
	</p>
	</main>
	<nav class="left-nav">
	<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	</ol>
	</nav>
	<aside class="right-toc">
	<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	</ol>
	</aside>
	</div>
	<footer>
	<div>
	Footer one
	</div>
	<div>
	Footer two
	</div>
	<div>
	Footer three
	</div>
	</footer>
	</body>

	</html>
	html, body {
	padding: 0;
	margin: 0;
	}

	body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	}

	header, footer {
	flex: none; /* 2 */
	background-color: yellow;
	display: flex;
	flex-flow: row wrap;
	}

	header {
	position: fixed;
	width: 100%;
	height: 36px;
	}

	footer {
	justify-content: space-around;
	padding: 64px 16px 64px 16px;
	}

	.layout-body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	margin-top: 36px;
	}

	main {
	flex: 1;
	}

	.left-nav, .right-toc {
	flex: 0 0 auto;
	}

	.left-nav {
	/* put the nav on the left */
	order: -1;
	}

	@media (min-width: 768px) {
	.layout-body {
	flex-direction: row;
	}
	main {
	flex: 1;
	}
	.left-nav, .right-toc {
	/* 12em is the width of the columns */
	flex: 0 0 12em;
	}
	}