Header Div and Content

[objnoob]

Hello Folks,

 

I have a header div that is stationary, doesn't move, and a content div that contains the rest of the data overflow:auto. The purpose: the content is a table of data (multiple columns) and the header div is the same table with column definitions and it allows the reader to easily identify the column definitions in the header without having to scroll back up.

 

The problem is that when the the content of the content div extends the width of the window, the header doesn't scroll horizontally with content div. This misaligns the header div with the content div when the user scrolls horizontally.

 

I would like my header div and content div to scroll horizontally in sync. I'd also like the scroll bars to extend the whole window height and width and have them attached to the window's bottom or right edge respectively.

 

Thanks!

 

The 2 divs are child nodes of the BODY tag. And here are their CSS attributes:

 

/* new CSS to position fix the column header */

#header-wrap {

position: fixed;

top: 0;

width: 100%;

background-image:url(../images/white.gif);

background-repeat:repeat;

}

 

#content-wrap{

overflow: auto;

width: 100%;

}

 

This Code is specific to each report, since the header height differs from report to report.

 

<style type='text/css'>

@media screen { #header-wrap {

height:135px;

} #content-wrap {

padding-top:135px;

}}

</style>