0

I wanted to implement a persistent header on my website where the body scrolls if need be. Kinda Like Facebook for example.

I see a lot of examples regarding tables so I wanted to find out if there's a way to do it without tables.

suchislife
  • 4,251
  • 10
  • 47
  • 78
  • This question has been asked zillion times before. Please research a little bit before posting. – srijan Jan 20 '12 at 21:29
  • Duplicate of http://stackoverflow.com/questions/256811/how-do-you-create-non-scrolling-div-at-the-top-of-an-html-page-without-two-sets but many people, myself included, would probably tell you `Don't do it!` – ccpizza Jan 20 '12 at 22:04
  • I guess it has. Now if only it would ever occur to me to search for keywords: "How do you create non scrolling div at the top of an HTML page without two sets of scroll bars", instead of my incredibly awesome and search engine optimized title, I would have found it. =) – suchislife Jan 24 '12 at 15:23

2 Answers2

4

You only need to set the position of the header to be fixed like so:

#header{
    position:fixed;
    top:0; left:0;
    height:40px;
    width:100%;
    z-index:999;
}

This will keep your header fixed to the top of the page and allow you to scroll the page body.

Also, forgot to add, depending on the height of your header, you might want to add a padding from the top, when starting your content. This will ensure that your content is not covered by the overlappng header when the content first loads.

Sagar Patil
  • 1,938
  • 13
  • 21
1

Tables are not necessary at all. You can do it by making a div 100% width, and some arbitrary height, then doing a position: fixed with top and left both set to 0.

Then be sure to push down the other content with CSS so its not underneath that header.

Kristian
  • 21,204
  • 19
  • 101
  • 176
  • and you push it down with z-index? – suchislife Jan 20 '12 at 21:28
  • 1
    You push it down using padding-top. The z-inex is used to ensure that the header is always on top. The greater the z-index of an element, the higher above the other elements (in the same stacking order) the element appears. – Sagar Patil Jan 20 '12 at 21:32
  • I'm sorry, I should have been more clear, you can just push the content divs down with a padding-top of the same height as header. Z-index for the header can be set to a higher number if it has trouble overlapping other z-indexed items. – Kristian Jan 20 '12 at 21:32
  • you should inspect the facebook header with firebug. they do it that way as well. – Kristian Jan 23 '12 at 18:18