"floating" headers above scrolling grid

[seven.reeds]

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?

[Ben C]

On 2006-10-02, seven.reeds <se*********@gmail.comwrote:

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?

You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.

[seven.reeds]

You could put the headings in the "col[123]" divs along with the

content, but make them position: fixed.

interesting idea, thanks. It is not quite doing what I had hoped for
though. I just know I'm going to have to do some semi-heroic
javascripting to get column deminsion hints from the column divs inside
the scrolling div and then draw or adjust the headings. This seems
like way too much effort for column headings. Maybe the person
demanding this behaviour will eventually listen and let the headings
scroll.

[Jim Land]

"seven.reeds" <se*********@gmail.comwrote in
news:11**********************@e3g2000cwe.googlegro ups.com:

>You could put the headings in the "col[123]" divs along with the
content, but make them position: fixed.

It is not quite doing what I had hoped for
though.

Well, you originally asked for:

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.

Doesn't the "position: fixed" do exactly that?

[Toby Inkster]

seven.reeds wrote:

It will hold from 2 to 10 columns of data and will almost always
have more than 40ems of lines...
[...]
<div STYLE"float: right; width: 80%; height: 40em; ...">
<div ...>
<div id="col1" STYLE="width: 33.3%;...>
<h3>header</h3>
...content...
</div>

Errr... this is a data table. Use <table>, <tr>, <th>, <tdand friends --
not this DIV muck.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Gus Richter]

seven.reeds wrote:

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?

Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>

--
Gus

[seven.reeds]

Something like this?

<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>

Hi Gus,

Yes, something exactly like that. I have also found other discussions
on doing this with non-standards complient browsers. For example:
http://www.agavegroup.com/?p=31 This example is not perfect for me but
it gets me in the ballpark

cheers,

[Gus Richter]

seven.reeds wrote:

>Something like this?
<http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html>

Hi Gus,

Yes, something exactly like that. I have also found other discussions
on doing this with non-standards complient browsers. For example:
http://www.agavegroup.com/?p=31 This example is not perfect for me but
it gets me in the ballpark

Check out this:
<http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html>

--
Gus