How can I stop my "headerSticky" and "content" divs from overlapping?

Question

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{
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!

Edit: Screen shot of the page. There should be a title for the table at the top (with the "Condition" and "Condition Status" values) that says "Problems," but it is hidden beneath the header:

Answer 1

You can try removing the position from your #headerSticky. If you position something absolute or fixed, any subsequent elements will act as though its not there (in this case creating an overlap). Also, I'm not sure, but I think some of your styles may not be valid.

I hope this helps in some way.

Answer 2

The property float:top; doesn't exist. See here: w3c Float property.

Position fixed means that this element will always have the same position, when the screen is scrolled, this will "stick" to the place you have positioned it on screen, so when your content is longer than the screen, the header will overlap it, remove this, add a height.

Remove the floats also, these are your basic layout divs and need more accurate positioning than float.

If you could also post up your HTML markup and the CSS for your other element we could probably help you more :)

Hope some of that helps.

Answer 3

I changed around the CSS a bit and this problem has been solved--here is the code that I used for the header:

#headerSticky { 
     height: 28px; 
    position: absolute; 
    top: 0; 
     width: 100%;
}

and the content div:

#content {
    height: 100%;
    float:right;
    overflow-y: auto;
    overflow-x: auto;
}

I know this isn't that different from what I originally had, but I started over from scratch with the CSS and the problem is definitely gone.

Thank you everyone who took the time to answer! I really appreciate it.