Fixed header and footers gotchas and suggestion

Question

I am planning to revamp my blog layout and this time I plan to have position: fixed headers and footers, both will be ~40px tall. The header will contain the logo and search buttons, the footer is going to contain lots of items such as subscribe buttons, related posts, jump to top/comments/bottom buttons and so on (list is not finalized).

Before I jump into this I am wondering if someone can tell me if its a good idea or not. And I'd also appreciate if you can point out best-practices and gotchas. The footer will contain facebook chat style popup for related posts and some other features so I am also wondering if its going to work with this layout. There will be ads too so this leaves me worrying if its possible to have a the header laying on top of ads (specially flash ads). Links to sample layouts will be appreciated.

Answer 1

Whether it's a good idea or not is up to you - you're the designer after all. The only gotcha you need to look out for is that all your content will be visible and the header and footer won't obstruct anything. You can easily prevent this by setting padding to your body element that corresponds to the heights of the header and footer:

body {
    padding: 40px 0 50px 0;
}

#header {
    position: fixed;
    top: 0;
    height: 40px;
}

#footer {
    position: fixed;
    bottom: 0;
    height: 50px;
}

Regarding to displaying elements over flash content; your flash elements must have wmode parameter set to opaque:

<param name="wmode" value="opaque" />