facebook style layout question

Question

I am trying to emulate this simple layout :

_______________________________________
|____header___________________________|
     |                           |
     |                           | 
     | Blueprint Container       | 
     |                           | 
     |                           |
     |                           |
     |                           |
     |                           |
_____|___________________________|_____
|__footer______________________________|

Where

1. the header and footer stretch across the width of the page
2. header always stays at the top
3. footer sticks to the bottom
4. the blueprint container is a fixed width container and everything inside it is managed using blueprint.

What's the best to way to accomplished this. The challenge is my weak layout skills and understanding how to make the headers/footer fluid so that they always stretch but the container stays fixed.

Answer 1

You need to use position:fixed; width:100%; height:100px; for the top and bottom divs. For the central one: position:relative; margin:100px auto; width:1000px;.

Answer 2

I think the best way would be to use CSS. I have uploaded some samples at http://www.4shared.com/file/zk1Sv21F/Facebook-Style_Bar.html
Also take a look at http://ryanfait.com/sticky-footer/