Responsive three column layout with fixed header, footer and side panels - html

Question

The below code is the closet I was able to achieve and exactly how I need it to function, the only problem with this approach is that because the fixed div is layered on top of the main div, it renders the main container not clickable.
This is how I need the layout to function:
There should be three columns, the outer two columns (sidepanels, left and right) are fixed.
The header and footer are also fixed and take up the max width of the
center "main" column (and are positioned in the center like the center "main" column).
On window resize, only the width of the center column (along with the
header and footer) is auto adjusted while the side columns stay the same
width (squeezing the center column).
I am trying to avoid the use of flexbox for browser compatibility.
body {
background: #333;
color: #FFF;
margin: 0;
height: 100%;
max-width: 1240px;
margin: 0 auto;
}
.fixed {
position: fixed;
z-index: 1;
height: 100%;
width: 100%;
max-width: inherit;
}
.main {
background: #444;
position: relative;
padding: 70px 10px;
height: 1000px;
width: auto;
min-width: 280px;
max-width: 800px;
margin: 0 220px;
}
.header,
.footer {
position: absolute;
background: #555;
height: 60px;
left: 220px;
right: 220px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.left,
.right {
position: absolute;
top: 0;
width: 220px;
background: #666;
height: 100%;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="fixed">
<div class="left">left</div>
<div class="header">header</div>
<div class="footer">footer</div>
<div class="right">right</div>
</div>
<div class="main">
main
</div>