Position: fixed in page center with full height left bar - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Fixed Position

Description

Position: fixed in page center with full height left bar

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style>
html {<!--from  w  w  w  .  j  a  v a 2  s  . com-->
   height:100%;
}

body {
   display:flex;
   align-items:center;
   justify-content:center;
   height:100%;
   margin:0;
}

.column {
   position:relative;
   width:51%;
   height:100%;
}

.left {
   background:Chartreuse;
}

.right {
   background:yellow;
}

.blend {
   box-shadow:0 5px 9px 0 blue;
   mix-blend-mode:multiply;
   position:fixed;
   height:51%;
   width:51%;
}

.box {
   background:grey;
   height:100%;
   width:100%;
   position:absolute;
}

.container {
   position:fixed;
   height:51%;
   width:51%;
}
</style> 
 </head> 
 <body> 
  <div class="column left"></div> 
  <div class="column right"></div> 
  <div class="blend"></div> 
  <div class="container"> 
   <div class="box">
     Lorem 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials