fixed postion divs

navigation and header divs remain in a fixed position

by Luke Skywalker

HTML

<div class="topBox">Header content here</div>
<div class="leftBox">site menu here</div>
<div class="contentContainer">
    <div class="content">Main content goes here Main content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes hereMain content goes here
        <br>
        <br>Main content goes here Main content goes here Main content goes here Main content goes here
        <br>Main content goes here Main content goes here Main content goes here Main content goes here
        <br>Main content goes here Main content goes here Main content goes here Main content goes here
        <br>Main content goes here Main content goes here Main content goes here Main content goes here
        <br>Main content goes here Main content goes here Main content goes here Main content goes here
        <br>Main content goes here Main content goes here Main content goes here Main content goes here
        <br>
    </div>
</div>

CSS

body {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
div {
    box-sizing: inherit;
}
.topBox {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 49;
    width:100%;
    height: 100px;
    border: solid 2px black;
    background-color: #dedede;
    box-shadow: 0px 10px 10px -2px #333;  
}
.leftBox {
    position: fixed;
    top: 100px;
    left: 0px;
    width: 100px;
    z-index: 50;
    height: calc(100% - 100px);
    background-color: #ababab;
    padding: 5px;
    border: solid 2px green;
    box-shadow: 10px 4px 10px -2px #333;    
}
.contentContainer {
    position: relative;
    top: 100px;
    left: 100px;
    width: calc(100% - 100px);
    padding: 10px;
    background-color: pink;
    border: solid 2px blue;
    
}
.content {
    margin: auto;
    padding: 10px;
    width: 350px;
    min-height: 300px;
    border: dotted 2px red;
    
}