100% width on absolute position element - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

100% width on absolute position element

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
html, body{
   width:3000px;
   position:relative;
}
.normal{<!-- w  ww  .ja  va 2  s .  c om-->
   position: static;
   background: blue;
   width: 100%;
   height: 100px;
}
.positioned{
   position: absolute;
   background: yellow;
   width: 100%;
   top: 100px;
   height: 100px;
}
.positioned-fix{
   position: absolute;
   background: red;
   width: inherit;
   top: 200px;
   height: 100px;
}

      </style> 
   </head> 
   <body> 
      <div class="normal">
          static 
      </div> 
      <div class="positioned">
          absolute 
      </div> 
      <div class="positioned-fix">
          absolute (fix) 
      </div>  
   </body>
</html>

Related Tutorials