Have Geek Brain

How can I prevent my "heading" and "content" divs from overlapping?

I am making a page with three main components: a "headerSticky" header, a "sidenav" left navigation div, and a "content" div.

Side navigation is fixed and does not move; but the content of the div should scroll by itself. However, the top of the div content is always overlapped by the div heading.

Here's the CSS for the heading:

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

and div content:

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

Any help would be greatly appreciated. Thanks!

Edit: Screenshot of the page. There should be a header for the table at the top (with values ​​for Condition and Status) that says Problems, but it's hidden under the header:

alt text http://img14.imageshack.us/img14/477/screenshot20100510at611.png

+2


a source to share


3 answers


You can try to remove the position from #headerSticky. If you position something absolute or fixed, any subsequent elements will act as if it isn't there (in which case an overlap is created). Also, I'm not sure, but I think some of your styles might not be valid.

Hope this helps in some way.



0


a source


The property float:top;

does not exist. See here: w3c Float Property .

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

Remove floats too, these are your main layouts and you need more precise positioning than floats.



If you could post your HTML and CSS markup for your other element as well, we could help you more :)

Hope it helps.

0


a source


I changed the CSS a bit and this problem was resolved - here is the code I used for the header:

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

and div content:

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

I know this is not that different from what I originally had, but I started from scratch with CSS and the problem definitely went away.

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

0


a source






More articles:


All Articles