prevent content div from overlapping header div when scrolling

Question

Hi I have two div.

<div id="header">
  -- some random html content here --
</div>

<div id="content">
    1
    2
    3
    4
    5
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    some long content that needs scrolling. 
</div>

Here is my css.

#header {
        vertical-align:middle; 
        position:fixed; 
        top:0ex; 
        width:800px;
        height: 48px;
        background-color: #FFFFFF;
        z-index: 10;
    }

    #content {
        text-align:center; 
        margin-left:auto; 
        margin-right:auto; 
        width: 800px;
        margin-top: 24px;
    }

1. I want window scrollbar to scroll only the body content. I want to avoid changing css for body tag since my section is subsection of a entire page.
2. I do not want the "content" div to overlay/overlap the "header" div. (Header should stay fixed and always appear on top. User should be able to scroll content of the body without overlaying/overlapping header.

Answer 1

Your question is kind of confusing, but what I got from it was that you needed to scroll part of the page and keep part of it from not scrolling? Using position:fixed instead of position:absolute should keep your div that says "some random html content here" will keep it from scrolling down. To make the header overlap the body, give it a value of background-color:white. I made a working example here