Hi,
I have a caontainer div that is 80% of the width of my display and 40em
high. It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines... so it will scroll. All of this is
working. Each column has a heading that, as the scrollbar is moved,
scrolls away just like the regular detail info.
So I am now asked to have the column headings "float" above the
scrolling grid so that when the scrollbar is moved the detal info
scrolls but the headings stay visible. I am having a heck of a time
making this work and wonder if any of you have ideas?
so I have something like
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>
</div>
</div>
I want something like:
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div style="float: left; width: 100%>
<h3 style="display: inline;">header</h3>
<h3 style="display: inline;>header2</h3>
<h3 style="display: inline;>header3</h3>
</div>
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col2" STYLE="width: 33.3%;...>
...content...
</div>
<div id="col3" STYLE="width: 33.3%;...>
...content...
</div>
</div>
</div>
The problem is that the scrollbar interferes with the inner widths of
the content columns so that the headers do not line up correctly.
ideas?