Fixed Page Header

Question

I\'ve never dealt with CSS but now I have to. I\'m developing some HTML code - a sketch of a website and have a problem with CSS. I would like to have my header in a fixed p

Answer 1

If I understand your problem correctly, you want to add the following CSS to your header to make it stay at the top of the page:

top: 0px;

Then, with div#content, give it a top margin to push it down out of the header's way:

margin-top: 200px;

So your CSS ends up looking like this:

header {
    border: 2px solid red;
    position: fixed;
    width: 100%;
    top: 0px;
}

#content {
    border: 2px solid black;
    margin-top: 200px;
}

Answer 2

Add fixed height to header, and use the same value for padding-top of content.

See http://jsfiddle.net/DmLkQ/

If you don't want fixed height, use jQuery:

http://jsfiddle.net/DmLkQ/5/

Answer 3

This should work for you:

header {
    position: absolute;
    top: 0px;
    width: 100%;
    border: 2px solid red;
}