Coercing a floating element that's not at the page's top to stop at the page's bottom

[J44xm]

Hello, folks.

Is it possible to get the bottom of a floating element (in case, a DIV) to
dynamically adjust itself so that it essentially attaches to the bottom of
the page, even if the floating element is not at the top of the page? Please
see this illustration I've made; it will show the layout of the site:

http://www.2and2.net/Uploads/Images/...float-help.png

I can't use percentages since the header at the top is fixed size.

Setting the height of the DIV to 100% causes it to set itself to the length
of the entire page, so it becomes too long. I tried encasing everything
below the header (i.e., the menu, content, and footer) in a DIV with a class
declaration, but 100% still seems to have been set to the length of the
entire page.

I hope I'm explaining myself suitably well. Can I get any guidance? I
/could/ render the menu first, have it span the entire length of the left
side of the page, and set the internal top margin to the height of the
header, but that seems fairly jury-rigged.
--
J44xm <http://j44xm.notlong.com>

[Disco Octopus]

J44xm wrote :

Hello, folks.

Is it possible to get the bottom of a floating element (in case, a DIV) to
dynamically adjust itself so that it essentially attaches to the bottom of
the page, even if the floating element is not at the top of the page? Please
see this illustration I've made; it will show the layout of the site:

http://www.2and2.net/Uploads/Images/...float-help.png

I can't use percentages since the header at the top is fixed size.

Setting the height of the DIV to 100% causes it to set itself to the length
of the entire page, so it becomes too long. I tried encasing everything
below the header (i.e., the menu, content, and footer) in a DIV with a class
declaration, but 100% still seems to have been set to the length of the
entire page.

I hope I'm explaining myself suitably well. Can I get any guidance? I
/could/ render the menu first, have it span the entire length of the left
side of the page, and set the internal top margin to the height of the
header, but that seems fairly jury-rigged.

is this helpfull?...

<style type="text/css">
#foot {position:absolute;bottom:0px;right:0px;}
</style>
....

<div id="foot">my feet smell</div>

--
order beef jerky online :
http://www.choicebeefjerky.com.au/order_online.html
not a beef jerky web site : http://mycoolfish.com/vote.cmks
go bare foot as often as possible

[J44xm]

["Disco Octopus"; Thu, 14 Jul 2005 05:28:15 GMT]

is this helpfull?...

<style type="text/css">
#foot {position:absolute;bottom:0px;right:0px;}
</style>

That's the ticket: I needed to make the section's positioning absolute. I
should have realized this, but I was thinking, for some reason, that doing
this would throw off the page's flow. Thanks very much for your help.
--
J44xm <http://j44xm.notlong.com>

[J44xm]

["J44xm"; Thu, 14 Jul 2005 18:48:58 GMT]

That's the ticket: I needed to make the section's positioning absolute. I
should have realized this, but I was thinking, for some reason, that doing
this would throw off the page's flow. Thanks very much for your help.

Update: It seems my absolute-positioning plan doesn't work in IE. This,
unfortunately, needs to be IE-friendly. Any other ideas?
--
J44xm <http://j44xm.notlong.com>

[Disco Octopus]

J44xm wrote :

["J44xm"; Thu, 14 Jul 2005 18:48:58 GMT]

That's the ticket: I needed to make the section's positioning absolute. I
should have realized this, but I was thinking, for some reason, that doing
this would throw off the page's flow. Thanks very much for your help.

Update: It seems my absolute-positioning plan doesn't work in IE. This,
unfortunately, needs to be IE-friendly. Any other ideas?

hmm. Works for me in IE6.
Are you able to show us you page online? or you actual code?

--
a beef jerky web site : http://www.choicebeefjerky.com.au
not a beef jerky web site : http://mycoolwheels.com/vote.cmks
if the oil light is on, dont think it will just go away

[J44xm]

["Disco Octopus"; Thu, 14 Jul 2005 23:00:21 GMT]

hmm. Works for me in IE6.
Are you able to show us you page online? or you actual code?

I've since changed the code to a simple table layout, but I was essentially
using this:

div { /* the DIV is immediately underneath the header graphic */
position: absolute /* I also tried "float: left" */
left: 0; width: 20%;
bottom: 0
}

I believe this comprises the major settings. Is anything obvious lacking?
Thanks again.
--
J44xm <http://j44xm.notlong.com>

[Disco Octopus]

J44xm wrote :

["Disco Octopus"; Thu, 14 Jul 2005 23:00:21 GMT]

hmm. Works for me in IE6.
Are you able to show us you page online? or you actual code?

I've since changed the code to a simple table layout, but I was essentially
using this:

div { /* the DIV is immediately underneath the header graphic */
position: absolute /* I also tried "float: left" */
left: 0; width: 20%;
bottom: 0
}

I believe this comprises the major settings. Is anything obvious lacking?
Thanks again.

This works for me in IE....

http://mycoolfish.com/t/bottom_bit.html

--
a beef jerky web site : http://www.choicebeefjerky.com.au
not a beef jerky web site : http://mycoolwheels.com/vote.cmks
if the oil light is on, dont think it will just go away

[boclair]

J44xm wrote:

["Disco Octopus"; Thu, 14 Jul 2005 05:28:15 GMT]

is this helpfull?...

<style type="text/css">
#foot {position:absolute;bottom:0px;right:0px;}
</style>

That's the ticket: I needed to make the section's positioning absolute. I
should have realized this, but I was thinking, for some reason, that doing
this would throw off the page's flow. Thanks very much for your help.

Perhaps it doesn't apply in your case but have you checked what happens
when the content extends over one screen height?

Try adding something like this

<div style="position:relative;height:1px;">
<p id="foot">my feet smell</p>
</div>

(The height is declared to overcome peekaboo bug in IE)

Louise

[boclair]

boclair wrote:

J44xm wrote:

["Disco Octopus"; Thu, 14 Jul 2005 05:28:15 GMT]

is this helpfull?...

<style type="text/css">
#foot {position:absolute;bottom:0px;right:0px;}
</style>

That's the ticket: I needed to make the section's positioning
absolute. I should have realized this, but I was thinking, for some
reason, that doing this would throw off the page's flow. Thanks very
much for your help.

Perhaps it doesn't apply in your case but have you checked what happens
when the content extends over one screen height?

Try adding something like this

<div style="position:relative;height:1px;">
<p id="foot">my feet smell</p>
</div>

(The height is declared to overcome peekaboo bug in IE)

There should also be top declared, say 1em, on the wrapping div.

IE will mishandle this so include rule margin-bottom:0 in id foot.

Louise

[boclair]

boclair wrote:

boclair wrote:

J44xm wrote:

["Disco Octopus"; Thu, 14 Jul 2005 05:28:15 GMT]
is this helpfull?...

<style type="text/css">
#foot {position:absolute;bottom:0px;right:0px;}
</style>


That's the ticket: I needed to make the section's positioning
absolute. I should have realized this, but I was thinking, for some
reason, that doing this would throw off the page's flow. Thanks very
much for your help.

Perhaps it doesn't apply in your case but have you checked what
happens when the content extends over one screen height?

Try adding something like this

<div style="position:relative;height:1px;">
<p id="foot">my feet smell</p>
</div>

(The height is declared to overcome peekaboo bug in IE)

There should also be top declared, say 1em, on the wrapping div.

IE will mishandle this so include rule margin:0 in id foot.

Louise

Sorry. Meant to write of course
margin:0 NOT margin-bottom:0

Louise

[J44xm]

["boclair"; Fri, 15 Jul 2005 00:29:57 GMT]

Try adding something like this

Forgive me for being dense, but were you saying that I should try this on
the page I'm working on, or were you speaking to Disco Octopus about the
code on that test page (http://mycoolfish.com/t/bottom_bit.html)?
--
J44xm <http://j44xm.notlong.com>

[boclair]

J44xm wrote:

["boclair"; Fri, 15 Jul 2005 00:29:57 GMT]

Try adding something like this

Forgive me for being dense, but were you saying that I should try this on
the page I'm working on, or were you speaking to Disco Octopus about the
code on that test page (http://mycoolfish.com/t/bottom_bit.html)?

I was addressing the proposal
#foot {position:absolute;bottom:0px;right:0px;}
and
<div id="foot">my feet smell</div>

This has problems if the content flows over more than one screen height.
The footer will be displayed at a position one screen height below the
top of the page

A generic solution is to wrap the footer in a container declaring
position relative. So, for example

<div style="position:relative;top:1em;height:1px">
<div id="foot">my feet smell</div>
</div>

The height declaration is to overcome a bug in IE's rendering. top
declaration is needed to ensure that footer in on a separate and last line

Louise