Fix header to top of page with horizontal scroll - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

Fix header to top of page with horizontal scroll

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

body { background: #aaa;  }
.hdr { overflow: auto; position: fixed; left: 0; right: 0; top: 0; height: 90px; }
.content { margin-top: 120px; }

      </style> 
 </head> <!--from w ww  .  j a v a 2 s  . c o  m-->
 <body> 
  <div class="hdr">
    this is a test this is a test this is a test this is a test this is a test 
    this is a test this is a test this is a test this is a test this is a test 
    this is a test this is a test this is a test this is a test this is a test 
    this is a test this is a test this is a test this is a test this is a test 
    this is a test this is a test this is a test this is a test this is a test 
  </div> 
  <div class="content">
    blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> blah 
   <br> 
  </div>  
 </body>
</html>

Related Tutorials