complete CSS Page layout 2++

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="Basic">
      <label>Basic DIV</label>  
    </div>
    <div class="intermediate">
      <div class="HContainer">

        <div class="VContainer">
          <label>Bla bla</label>
          <label>Bla bla</label>
          <label>Bla bla</label>
        </div>
        <div class="Basic">
          <label>Bla bla</label>
        </div>
        <div class="VContainer">
          <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>
          <label>Bla bla</label>
          <label>Bla bla</label>     
        </div>
      </div>
      <div class="Basic">
        <label>Basic DIV</label>  
      </div>
    </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;
}
#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; 
}

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

#work {
  position: absolute; top: 0px; right: 0; bottom: 0px; left: 130px;  
  margin: 0; padding: 6px;
  display: flex;	flex-direction: column;
  overflow: hidden;
  background: #448; color: #444;
}

.Basic {
  background: #aaf; color: #444;;  
  margin: 4px; padding: 4px;
}

.intermediate {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #ddf; color: #444;
}
.HContainer {
  display: flex; flex-direction: row;
  overflow: auto;
  background: #afa; color: #444;
  margin: 4px; padding: 4px;
}
.VContainer {
  display: flex; flex-direction: column;
  overflow: auto;
  margin: 4px; padding: 4px;
  background: #aaf; color: #444; 
}

LABEL {
  padding: 6px 10px;
}