By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,044 Members | 1,287 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,044 IT Pros & Developers. It's quick & easy.

"floating" headers above scrolling grid

P: n/a
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?

Oct 2 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
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.
Oct 3 '06 #2

P: n/a
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.

Oct 3 '06 #3

P: n/a
"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?

Oct 3 '06 #4

P: n/a
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

Oct 3 '06 #5

P: n/a
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
Oct 3 '06 #6

P: n/a
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,

Oct 4 '06 #7

P: n/a
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
Oct 4 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.