JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">inhaltsbereich mitte</div>
<div class="column first">linke spalte<br/><br/>abstand</div>
<div class="column second">rechte spalte</div>
<header>header oben drüber</header>
<footer>footer unten drunter</footer>

CSS

html {
    background:grey;
}
body {
    max-width:800px;
    min-width:600px;
    margin:100px auto 0;
    position:relative;
    padding:0;
}
.column {
    float:left;
    width:200px;
    position:relative;
    margin: 0;
    padding:10px;
}
.column.second {
    float:right;
}
.content {
    position:absolute;
    left:0;
    top:0;
    right:0;
    border-right:220px solid lightblue;
    border-left:220px solid green;
    min-height:100%;
    background:white;
    padding:0 10px;
}
header {
    position:absolute;
    top:-100px;
    height:100px;
    left:0;
    right:0;
    background:orange;
}
footer {
    clear:both;
    position:relative;
    background:black;
    color:white;
    display:block;
}

JavaScript

document.createElement('footer');
document.createElement('header');