complete CSS Page layout

Testing page layout with DIVs absolutes and relatives.

by roge roge

HTML

<div ID="header"><label>Header</label></div>
<div ID="middle">
  <div ID="controlMenu">
    <label>Menu</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>
    <label>Bla bla</label>
  </div>
  <div ID="work">
    <div class="FixedHeight">
      <label>Fixed Height</label>  
    </div>
    <div class="FlexHeight">
      <label>Flex Height</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>
    <label>Bla bla</label>
    </div>
    <div class="FixedHeight">
      <label>Fixed Height</label>  
    </div>
  </div>
  <!--
  -->
</div>
<div ID="footer"><label>Footer</label></div>

CSS

body {
	margin: 0; padding: 0;
	background: #222;	color: #fff;
	font: 600 14px/24px Monospace, Sans-Serif;
}
#header {
  position: absolute; top: 0; left:0; right: 0;
  height: 26px;
  margin: 0; padding: 0;
  background: #faa; color: #444; opacity: 0.7;
}
#middle {
  position: absolute; top: 26px; bottom: 26px; left:0; right: 0;
  margin: 0; padding: 0;
}
#footer {
	position: absolute; bottom: 0; left:0; right: 0;
	height: 26px;
  margin: 0; padding: 0;
	background: #faa;	color: #444; opacity: 0.7;
}

#controlMenu {
  position: absolute; top: 0px; bottom: 0; left: 0;
  margin: 0; padding: 0px;
  width: 200px;
  display: flex;	flex-direction: column;
  overflow: auto;
  background: #ddf; color: #444; opacity: 0.7;
}

#work {
  position: absolute; top: 0px; right: 0; bottom: 0px; left: 200px;  
  margin: 0; padding: 6px;
  display: flex;	flex-direction: column;
  overflow: auto;
  background: #aff; color: #444; opacity: 0.7;
}

.FixedHeight {
  background: #faf; color: #444; opacity: 0.7;  
}
.FlexHeight {
  position: relative;
  display: flex; flex-direction: column;
  overflow: auto;
  background: #ffa; color: #444; opacity: 0.7;  
}
LABEL {
  padding: 6px 10px;
}