Fixed Header and sidebar

by Niels Harbo

HTML

<header><h1>My Fixed Header</h1></header>
<section id="leftSection"><h1>Fixed Left Section</h1></section>
<aside id="sideBar"><h1>Srollable Right Area</h1></aside>

CSS

*{box-sizing:border-box;}
html, body{
  margin:0; 
  padding:0;
  }
body{height:
  100%;
}
header, section{
  background:#456;
  color:#fff;
  position:fixed;
}
header{
  z-index:2;
  margin-top:0;
  top:0;
  width:100%;
  padding:10px;
  text-align:center;
  border-bottom:2px solid red;
}
section{width:37%;
max-width:300px;
top:100px;
height:100%;
padding:5px;
padding-top:30px;
}
aside{
  width:60%;
  margin-left:38%;
  margin-top:150px;
}

JavaScript

//Ignore this --Just generating some content
var sideBar = document.getElementById('sideBar');
var leftSection = document.getElementById('leftSection');
for(var i= 0; i< 350; i++){
	sideBar.innerHTML += ' Sample content. ';
  if  (i<10){
  	leftSection.innerHTML += ' Sample content. ';
  }
}