Page Layout

position: absolute element horizontal and vertical center

HTML

<div class="wrapper">
<div id="header" >
<p>
Greating this is header 
</p>
</div>
   <div id ="left" >
    This is left 
   </div>
   <div id="main" >
   Main here 
   </div>
   <div id="right" >
   Right 
   </div>
   <div id="footer">
    Footer 
   </div>
</div>

SCSS

.wrapper {
    position:relative;
    width:100%;
    height: 300px;
    background: #FC0;
    
}
#header { 
clear:both ; 
background-color:red;
height:100px;
}
#left {
  width:100px ;
background-color:blue;
float:left; 
}
#main {
  width:100px ;
background-color:blue;
float:left; 
}