Div with position absolute having innerwidth of div with scrollbar - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

Div with position absolute having innerwidth of div with scrollbar

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html,<!-- w  ww  .  j  a  va 2s . c o  m-->
body {
   position:absolute;
   border:0;
   margin:0;
   padding:0;
   width:100%;
   height:100%;
}

#header_box {
   position:absolute;
   left:0;
   top:0;
   right:0;
   height:0px;
   width:100%;
   overflow:visible;
   display:table;
   color:Chartreuse;
}

#scroller {
   display:table-cell;
   float:right;
   overflow-x:hidden;
   overflow-y:scroll;
   height:0px;
   width:auto;
}

#scroller>div {
   width:0px;
   height:102%;
}

#THIRD {
   display:table-cell;
   width:100%;
   height:0px;
}

#THIRD_A {
   position:relative;
   width:100%;
   height:0px;
}

#THIRD_B {
   position:absolute;
   top:0;
   left:51%;
   width:41px;
   height:221px;
   background:black;
}

#THIRD_C {
   position:absolute;
   top:0;
   left:11%;
   width:126px;
   height:121px;
   background:black;
}

#THIRD_D {
   position:absolute;
   top:0;
   right:0%;
   width:41px;
   height:221px;
   background:black;
}

#scrollbox {
   position:absolute;
   top:0px;
   width:100%;
   height:100%;
   background:yellow;
   overflow-x:hidden;
   overflow-y:scroll;
}

#center1 {
   position:relative;
   margin-top:131px;
   left:11%;
   width:41px;
   height:81px;
   background:red;
}

#center2 {
   position:relative;
   margin-top:31px;
   left:51%;
   width:141px;
   background:red;
}

#center3 {
   position:relative;
   margin-top:0px;
   float:right;
   width:41px;
   height:981px;
   background:red;
}
</style> 
 </head> 
 <body> 
  <div id="scrollbox"> 
   <div id="center1">
     Lorem ipsum 
   </div> 
   <div id="center2">
     Lorem ipsum 
    <br>Lorem ips 
    <br>Lorem ips 
    <br>Lorem ips 
    <br>Lorem ips 
    <br>Lorem ips 
    <br>Lorem ips 
    <br>Lorem ips 
    <br>Lorem ips 
    <br> 
   </div> 
   <div id="center3">
     Lorem ipsum 
   </div> 
  </div> 
  <!-- HEADER CONTAINER --> 
  <div id="header_box"> 
   <!-- HEADER  --> 
   <div id="THIRD"> 
    <div id="THIRD_A"> 
     <div id="THIRD_B">
       Lorem ipsum dol 
     </div> 
     <div id="THIRD_C">
       Lorem ipsum dol 
     </div> 
     <div id="THIRD_D">
       Lorem ipsum dol 
     </div> 
    </div> 
   </div> 
   <!-- FAKE SCROLLBAR --> 
   <div id="scroller"> 
    <div></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials