I'm making a page that has three main components: a "headerSticky" header div, "sidenav" left navigation div, and "content" div.

The side navigation is fixed and does not move; but the content div should be scrollable on its own. However, the top of the content div is always overlapped by the header div.

Here is the CSS for the header:

#headerSticky{
float:top; 
position:fixed;
padding:6px;
width: 100%;}

and the content div:

#content {
padding-top: 100px;
float:right;
overflow: auto;
height: 90%; 
width: 840px;
padding: 0 20px 20px;}

Any help would be appreciated. Thank you!