Absolute position, variable height?

I'm taking the liberty of reposting the query I posted five days
ago. I hope that it just got overlooked because it was in the middle
of a thread.

Sample page:
http://www.acad.sunytccc.edu/instruc...e/probform.htm
The above has the breadcrumbs physically at end of file but
positioned absolutely via CSS to the start of the display, so as to
have the actual page content show in search engine results. (The
breadcrumbs are presently in a table inside the div. I do plan to
get rid of the table.)

This replaces
http://www.acad.sunytccc.edu/instruc...t/probform.htm
which has the breadcrumbs physically at the top of the file.

But the absolutely positioned version naturally breaks when the
user's font size is quite large or the window is quite narrow: the
breadcrumbs overlay the beginning of the page content.

Here's my question: if I want to position anything visually across
the top of the page but have it physically at the end of the file,
how do I set it up so that the actual content moves down according
to the height of the positioned stuff?

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

"Stan Brown" <the_stan_brown (AT) fastmail (DOT) fm> wrote

I'm taking the liberty of reposting the query I posted five days
ago. I hope that it just got overlooked because it was in the middle
of a thread.

Sample page:
http://www.acad.sunytccc.edu/instruc...e/probform.htm
The above has the breadcrumbs physically at end of file but
positioned absolutely via CSS to the start of the display, so as to
have the actual page content show in search engine results. (The
breadcrumbs are presently in a table inside the div. I do plan to
get rid of the table.)

This replaces
http://www.acad.sunytccc.edu/instruc...t/probform.htm
which has the breadcrumbs physically at the top of the file.

But the absolutely positioned version naturally breaks when the
user's font size is quite large or the window is quite narrow: the
breadcrumbs overlay the beginning of the page content.

Here's my question: if I want to position anything visually across
the top of the page but have it physically at the end of the file,
how do I set it up so that the actual content moves down according
to the height of the positioned stuff?

Well, when no one else will touch a positioning question, I poke my
inadequate head in.

Seems to me that unless the div is at the point in the code where it's to
appear, you cannot float it. And if you cannot float it, you cannot get
items rendered under it to respect its size if it should vary.

Two possible solutions pop into my head.

1) Move #crumbs back to top and float left. Then clear, on the content div.
In fact, replace the table with two divs (floated left and right
respectively) within the crumbs div.

2) Set a width for the crumbs div. Scrolling will be invoked at narrow
screen widths, but you can leave the crumbs div at the end of the file where
you seem to want them.

In article <3fe5f42e$0$4755$61fed72c (AT) news (DOT) rcn.com> in
comp.infosystems.www.authoring.stylesheets, Neal wrote:

Seems to me that unless the div is at the point in the code where it's to
appear, you cannot float it. And if you cannot float it, you cannot get
items rendered under it to respect its size if it should vary.

Thanks, Neal. That's kind of ho I was thinking, but I wasn't sure
whether I was missing something.

2) Set a width for the crumbs div. Scrolling will be invoked at narrow
screen widths, but you can leave the crumbs div at the end of the file where
you seem to want them.

Hmm -- didn't think about this. I'll try some experiments.

(You had mentioned getting rid of the table in crumbs. That's
definitely in my plans. I was trying to solve the harder problem
first.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/