JSFiddle - React, Tailwind, and code Playground
HTML
<div id="header">
<div class="nav">nav</div>
</div>
<div class="center">
<div class="left">
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
<div class="left-el">left-el</div>
</div>
<div class="right">right</div>
</div>
CSS
#header{
position:relative;
height:30px;
width:400px;
margin: 0 auto;
}
.centerheader{
width: 400px;
margin: 0 auto;
position:relative;
}
.center {
width: 400px;
background-color: red;
margin: 0 auto;
}
.nav {
position:fixed;
width: 400px;
height: 30px;
background-color: yellow;
}
.left, .right {
width: 150px;
display: inline-block;
vertical-align: top;
}
.left {
background-color: green;
}
.right {
position:fixed;
background-color: blue;
height: 40px;
}
.right {
margin-left: 3px;
position: fixed;
}
body{
margin: 0 auto;
}