Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

Creating a Fixed Header


 / Published in: CSS
 

Instead of letting your entire page scroll you might want to hold the header with your logo and navigation fixed in place and only let the content below scroll. You want to make sure to keep the header and content divs separate and then use position: fixed on the header. Other ideas you can try are creating a scrollable table with a fixed header within your page or keeping both header and footer fixed while allowing your content to scroll between them.

  1. The HTML:
  2.  
  3. 1 </pre>
  4. 2 <div id="header">header</div>
  5. 3 <div id="content">content</div>
  6. 4 <pre>
  7.  
  8.  
  9.  
  10. The CSS:
  11.  
  12. 1 #header {
  13. 2 position:fixed;
  14. 3 }

Report this snippet  

You need to login to post a comment.