CSS Page Absolute layout

Testing page layout with DIVs absolutes and relatives.

by roge roge

HTML

<div id="header">Header</div>
<div id="boxLeft">
	Menu
	<label>Bla bla</label>
	<label>Bla bla</label>
	<label>Bla bla</label>
	<label>Bla bla</label>
	<label>Bla bla</label>
	<label>Bla bla</label>
	<label>Bla bla</label>
</div>
<div id="work">Working area</div>
<div id="footer">Footer</div>

CSS

body {
	margin: 0; padding: 0;
	background: #222;	color: #fff;
	font: 600 14px/24px Monospace, Sans-Serif;
}
#header {
    height: 40px;
    margin: 0; padding: 10px;
    background: #faa; color: #444;
}
#footer {
	position: absolute; 
  bottom: 0; left:0; right:0;
	height: 40px;
	margin: 0; padding: 0;
	background: #faa;	color: #444;
}
#boxLeft {
	position: absolute; 
  top:40px; left:0; bottom:40px;
  width: 140px;
	display: flex;	flex-direction: column;
	overflow: auto;
	margin: 0; padding: 0;
	border-right: solid 1px #e9eced;
	background: #afa; color: #444;
}
#work {
	position: absolute; top:40px;left: 140px; right:0; bottom: 40px;
	margin: 0; padding: 0;
	border-right: solid 1px #e9eced;
	background: #aaf; color: #444;
	display: flex; flex-direction: column;
}