Flexbox 2 Column Fixed Header

This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.
Sidebar

Your navigation device would be placed in the header in this design, so that it would always be visible.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox 3 Columns with Sidebars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin:0;
padding : 0;
box-sizing: border-box;
}

body {
max-width: 1280px; /*1280px width of parent containers*/
min-height: 100dvh;
margin: 0 auto;  /* center containers */
background-color: whitesmoke;
font-family: arial , serif;
}

header {
display: flex;
flex-wrap : wrap;
height : clamp(6rem , 6rem + 1dvw  , 7rem);
padding: clamp(1rem , 1dvw + 1rem   , 3rem) 5dvw;
width: 100dvw;
background-color: #000;
position: fixed;
top: 0;
left: 0;

}

.hdr-left { 
flex:1;
padding: 0; margin: 0;
}

nav {
flex: 4;
padding: 0; margin: 0;
align-items: start;
}

 div.offset { /* Spacing to force content below fixed header */
display: flex;
height : clamp(6rem , 6rem + 1dvw  , 7rem);
padding: clamp(1rem , 1dvw + 1rem   , 3rem) 0;
margin-bottom: clamp(2rem , 5dvw , 4rem);
}

div.full {
  display: flex; /*alert browser - this is flexbox */
  justify-content: center; /* center columns */
  flex-wrap: wrap;  /* wrap contents when necessary */
  gap : clamp(2rem , 5dvw , 4rem); /* adjusts spacing between 32px and 64px*/
  padding:  1dvw 5dvw;
}

.column {
  flex : 1; 
  align-items : center
}

.left {
flex: 3; /*Increase width*/
}

.right {
flex: 1;
border: solid 1px;
background-color: #eee
}

footer { 
display: flex;
justify-content: center;
height : clamp(5rem , 5rem + 1dvw  , 7rem);
padding: 1dvw 5dvw;
margin-top: clamp(2rem , 5dvw , 4rem);
background-color: #000;
}

.hdr-left p , footer p {
color : whitesmoke;
font-size: clamp(1.5rem , 1dvw + 1rem , 1.75rem);
text-indent 0;
padding : 0 0
}

.left p , .right p { 
  font-size : clamp( 1.125rem , 1dvw + 1rem , 1.375rem); 
  padding : clamp(1rem , 1dvw + .75rem , 1.375rem);
}

nav p {
font-size: 1.125rem;
color: #fff;
padding: 0;
margin: 0;
}

h1 , h2 {
text-align: center}

pre {
font-size : 1.125rem
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-spaprece: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

@media (max-width: 48rem) { /*768px*/
 div.column.left ,  div.column.right , .hdr-left , nav {
flex: 100%;
}
 .hdr-left p {
text-align: center
}
}
</style>
</head>
<body>
<header>
<div class="hdr-left">
<p>Header</p>
</div>
<nav>
<p>Products    Pricing    Services</p>
</nav>
</header>
<div class="offset">
<p> </p>
</div>
<div class="full">
<div class="column left">
<h1>Flexbox 2 Column Fixed Header</h1>
<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>
<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>
<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>
<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>

<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>

<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>

<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>

<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>
<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>
<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>

<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>

<p>This is filler content. We need enough of it to test the scrolling action. Normally we'd place a tutorial here but we're getting lazier as the days go by.</p>

</div>
<div class="column right">
<h2>Sidebar</h2>
<p>Your navigation device would be placed in the header in this design, so that it would always be visible.</p>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>