Divs with z-index with fixed header and left bar

Description

Demo Code

<html lang="pt" dir="ltr">
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur a</title> 
  <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> 
  <style type="text/css">
html, body {
   margin:0;
   padding:0;
   width:100%;
   height:100%;
}

div.header {<!-- ww  w. j  a  va2  s .c  o m-->
   position:fixed;
   top:0;
   left:0;
   z-index:2;
   width:100%;
   height:201px;
   background-color:Chartreuse;
}

div.menu {
   position:fixed;
   left:21px;
   top:221px;
   width:201px;
   height:351px;
   background-color:yellow;
}

div.wrapper {
   float:left;
   padding-left:261px;
   padding-top:221px;
}

div.blocks {
   width:601px;
   height:301px;
   margin:6px;
}

div#block1 {
   background-color:blue;
}

div#block2 {
   background-color:pink;
}

div#block3 {
   background-color:OrangeRed;
}

div#block4 {
   background-color:grey;
}

div#block5 {
   background-color:BlueViolet;
}

div#block6 {
   background-color:Chartreuse;
}

div#block7 {
   background-color:yellow;
}
</style> 
 </head> 
 <body> 
  <div class="header">
    Lorem ipsum dolor si 
  </div> 
  <div class="menu"> 
   <ul> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
   </ul> 
  </div> 
  <div class="wrapper"> 
   <div class="blocks" id="block1">
     Lorem ipsu 
   </div> 
   <div class="blocks" id="block2">
     Lorem ipsu 
   </div> 
   <div class="blocks" id="block3">
     Lorem ipsu 
   </div> 
   <div class="blocks" id="block4">
     Lorem ipsu 
   </div> 
   <div class="blocks" id="block5">
     Lorem ipsu 
   </div> 
   <div class="blocks" id="block6">
     Lorem ipsu 
   </div> 
   <div class="blocks" id="block7">
     Lorem ipsu 
   </div> 
  </div>  
 </body>
</html>

Divs with z-index with fixed header and left bar - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials