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

Absolute position, variable height?

P: n/a
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/
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

"Stan Brown" <th************@fastmail.fm> wrote in message
news:MP************************@news.odyssey.net.. .
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.
Jul 20 '05 #2

P: n/a
In article <3f**********************@news.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/
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.