CSS Position Layer relative to bottom of another layer.

01-17-2006

I would like to be able to position the top of one layer containing some
text to a fixed distance from the bottom of another layer containing text.

Is this possible and if so how?

For example, I might have a set of web pages I want to develop and each page
contains a layer of varying vertical length. On each page underneath that I
want to position another layer containing a copyright message.
Ideally I would not have to go through each page and position each copyright
message individually as this would be a pain to maintain. Instead it would
be better if the copyright layer was always a fixed distance from the text
box so no matter the size of the main text box, the copyright message is
always positioned appropriately.

Hope this makes sense and that someone can assist.

Kind regards

Dave.

01-17-2006

Dave Smithz wrote:

> I would like to be able to position the top of one layer containing some
> text to a fixed distance from the bottom of another layer containing text.

<div>
Here is some text.
</div>
<div style="margin-top:58px">
This text is exactly 58px below the other text.
</div>

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

01-17-2006

Toby Inkster wrote :
> Dave Smithz wrote:
>
>> I would like to be able to position the top of one layer containing some
>> text to a fixed distance from the bottom of another layer containing text.
>
> <div>
> Here is some text.
> </div>
> <div style="margin-top:58px">
> This text is exactly 58px below the other text.
> </div>
>

If the layers are nested, then

<head>
(...)
<style type="text/css">
div#Container, div#NestedDiv {position: absolute;}
div#NestedDiv {bottom: 58px;}
</style>
(...)
</head>
<body>
(...)

<div id="Container">Here is some text. Must be at least 59px in height.
<div id="NestedDiv">This text is exactly 58px from the bottom of its
containing block.</div>
</div>

Gérard
--
remove blah to email me

01-17-2006

Gérard Talbot wrote:

> <head>
> (...)
> <style type="text/css">
> div#Container, div#NestedDiv {position: absolute;}
> div#NestedDiv {bottom: 58px;}
> </style>
> (...)
> </head>
> <body>
> (...)
>
> <div id="Container">Here is some text. Must be at least 59px in height.
> <div id="NestedDiv">This text is exactly 58px from the bottom of its
> containing block.</div>
> </div>

But here, the *bottom* of the nested div is 58px *above* the bottom of the
container, which doesn't sound like what the OP wanted at all.

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

01-17-2006

Dave Smithz wrote:

> I would like to be able to position the top of one layer containing some
> text to a fixed distance from the bottom of another layer containing text.

I don't understand why it has to be different layers. If you just use
two divs, the second one will normally be placed below the first. If
you need a certain distance, insert a filler of some sort.

<div>
page content
</div>

<div>
copyright stuff
</div>

--
Gregor's Motorradreisen:
http://hothaus.de/greg-tour/

01-17-2006

>> I would like to be able to position the top of one layer containing some
>> text to a fixed distance from the bottom of another layer containing
>> text.
>
> <div>
> Here is some text.
> </div>
> <div style="margin-top:58px">
> This text is exactly 58px below the other text.
> </div>

Hmmm my brief experiment did not give the desired results using the example
above exactly as it is. Do I need to mark the second div tag as relative. IF
there is a good definitive reference website where I can look up items such
as "margin-top:58px" then that would be useful.

Cheers

01-17-2006

Dave Smithz wrote:

>><div>
>> Here is some text.
>></div>
>><div style="margin-top:58px">
>> This text is exactly 58px below the other text.
>></div>
>
>
> Hmmm my brief experiment did not give the desired results using the example
> above exactly as it is.

Really? Show us the page.

--
Gregor's Motorradreisen:
http://hothaus.de/greg-tour/

01-17-2006

Dave Smithz wrote:

> Hmmm my brief experiment did not give the desired results using the example
> above exactly as it is. Do I need to mark the second div tag as relative.

Both should be position:static, not relative or absolute.

http://examples.tobyinkster.co.uk/58pixels

> IF there is a good definitive reference website where I can look up
> items such as "margin-top:58px" then that would be useful.

http://www.w3.org/TR/CSS21/

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

01-17-2006

Toby Inkster wrote :
> Gérard Talbot wrote:
>
>> <head>
>> (...)
>> <style type="text/css">
>> div#Container, div#NestedDiv {position: absolute;}
>> div#NestedDiv {bottom: 58px;}
>> </style>
>> (...)
>> </head>
>> <body>
>> (...)
>>
>> <div id="Container">Here is some text. Must be at least 59px in height.
>> <div id="NestedDiv">This text is exactly 58px from the bottom of its
>> containing block.</div>
>> </div>
>
> But here, the *bottom* of the nested div is 58px *above* the bottom of the
> container, which doesn't sound like what the OP wanted at all.
>

Ok. I read the OP post and misinterpreted it incorrectly. With abs. pos.
elements and a nested one, then one would need to compute/get the
clientHeight of the containing block (id="Container") and then add 58px.
Reposition would have to be done on an onload event of the body node.
If the nested div is not abs. pos., then your proposal is correct.

Cheers,

Gérard
--
remove blah to email me

01-18-2006

With neither quill nor qualm, =?UTF-8?B?R8OpcmFyZCBUYWxib3Q=?= quothed:

> > But here, the *bottom* of the nested div is 58px *above* the bottom of the
> > container, which doesn't sound like what the OP wanted at all.
> >
>
> Ok. I read the OP post and misinterpreted it incorrectly.

Well next time please misinterpret it correctly...

--
Neredbojias
Contrary to popular belief, it is believable.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css "div" bottom of window or bottom of content.	Dan	HTML	1	04-04-2008 09:40 AM
business layer, data access layer , presentation layer for asp.net using C#.net	Dhananjay	ASP .Net	1	12-18-2006 11:35 PM
CSS to put text at bottom of browser window, or page bottom, whichever is lower?	Noozer	HTML	1	03-13-2006 10:35 AM
CSS Position Layer relative to bottom of another layer (cont.)	Dave Smithz	HTML	3	02-20-2006 05:20 PM
Where is Form Relative Position and Absolute Position in VS.Net 2005 ?	Luqman	ASP .Net	1	02-07-2006 10:27 AM