Left side bar cover header area - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Left side bar cover header area

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum do</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>
.header {<!--from  w w  w. j  a  v  a2  s .c o m-->
   height:51px;
}

.body {
   position:absolute;
   top:51px;
   right:0;
   bottom:0;
   left:0;
   display:flex;
}

.sidebar {
   width:141px;
}

.main {
   flex:2;
   display:flex;
   flex-direction:column;
}

.content {
   flex:2;
   display:flex;
   overflow:auto;
}

.box {
   min-height:-webkit-min-content;
   display:flex;
}

.column {
   padding:21px;
   border-right:2px solid Chartreuse;
}

.column>div {
   height:2001px;
   background:red;
}

.column:nth-child(2)>div {
   height:auto;
}

body {
   font-family:sans-serif;
   font-size:21px;
   line-height:51px;
   text-transform:uppercase;
   font-weight:bold;
}

.header {
   text-align:center;
   color:yellow;
   background:blue;
}

.sidebar {
   background:pink;
   padding:5px 21px;
   color:OrangeRed;
}

.page-header {
   padding:7px 21px;
   background:grey;
   color:BlueViolet;
   font-size:.9em;
}

.content {
   background:Chartreuse;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="header">
    Lorem ipsum d 
  </div> 
  <div class="body"> 
   <div class="sidebar">
     Lorem ips 
   </div> 
   <div class="main"> 
    <div class="page-header">
      Lorem ipsum dolor sit amet, consectetur a 
    </div> 
    <div class="content"> 
     <div class="box"> 
      <div class="column"> 
       <div>
         Lorem ipsu 
       </div> 
      </div> 
      <div class="column"> 
       <div>
         Lorem ipsu 
       </div> 
      </div> 
      <div class="column"> 
       <div>
         Lorem ipsu 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials