24. Absolute Positioning Example

Example code:
<STYLE>
  .frame { 
    position:absolute;
    border: 1px solid red; 
  } 
  #header {
      width:100%; height:15%;
      top:0; right:0; bottom:auto; left:0;
  }
  #sidebar {
      width:5em; height:auto;
      top:15%; right:auto; bottom:15%; left:0;
  }
  #main {
      width:auto; height:auto;
      top:15%; right:0; bottom:15%; left:5em;
  }
  #footer {
      width:100%; height:15%;
      top:auto; right:0; bottom:0; left:0;
  }
</STYLE>
 
<!-- Notice how simple the HTML is. --> 
<DIV class="frame" id="header">Header</DIV>
<DIV class="frame" id="sidebar">Sidebar</DIV>
<DIV class="frame" id="main">Main</DIV>
<DIV class="frame" id="footer">Footer</DIV>
Example appearance:
Main