CSS Position Layer relative to bottom of another layer.

Dave Smithz · Jan 16, 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.

Toby Inkster · Jan 16, 2006

Dave said:
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>

Guest · Jan 16, 2006

Toby Inkster wrote :

<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

Toby Inkster · Jan 17, 2006

GÃ©rard Talbot said:
<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.

Greg N. · Jan 17, 2006

Dave said:
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>

Dave Smithz · Jan 17, 2006

<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

Greg N. · Jan 17, 2006

Dave Smithz wrote:

Hmmm my brief experiment did not give the desired results using the example
above exactly as it is.

Really? Show us the page.

Toby Inkster · Jan 17, 2006

Dave said:
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/

Guest · Jan 17, 2006

Toby Inkster wrote :

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

Neredbojias · Jan 18, 2006

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

Ok. I read the OP post and misinterpreted it incorrectly.

Well next time please misinterpret it correctly...

Neredbojias · Jan 18, 2006

With neither quill nor qualm, Dave Smithz quothed:

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?

If you're talking about positioned layers and the top has only text,
margin-top the 2nd layer using ems. (You might also need some padding
in pixels for fine adjustment.)

Gregory.Spencer · Jan 25, 2006

Hi, been a while since I reploie to this thread and I am doing it
thorugh someone else's PC, but I have still not resolved it. But your
examples and input have been very useful. My circumstances are a bit
different.

This is what I have. It is like this now because of the way the website
was built (learning more while devfelopming) so it is hard to change
aspects without a lot of work,

A summary example is, we I have two div's

<div>
<table class="tabletextstyle">
content
</table>
</div>

<div class="copyrightstyle">
Copy right text
</div>

In another file the styles are defined as

..copyright-text {
width:169px;
height:25px;
z-index:11;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #66CCFF;
margin-top:100px
}

..tabletextstyle{
position: absolute;
top: 150px;
left: 182px;
width: 437px;
height: 74px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
z-index: 10;
}

Now the main table with the main page text is defined in many webpages
and I was reluctatnt to make changes to that. So from this I was trying
to make the copyright text be relative fixed distance from the bottom
of the main table text.

Trying to place the div for the copyright text like I have above did
not quite display it where I wanted it. I will keep reading, but if
there is a way to easily amend my code to make this work better then I
am open to suggestions.

Thanks

Dave

CSS Position Layer relative to bottom of another layer (cont.)	3	Feb 17, 2006
Interfering CSS	1	Feb 9, 2024
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Need help making the position of an infinite animation sticky	1	Dec 18, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
trouble with div layer	6	Feb 28, 2007
layer switching	5	Jan 10, 2007
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 24, 2022

CSS Position Layer relative to bottom of another layer.

Dave Smithz

Toby Inkster

Guest

Toby Inkster

Greg N.

Dave Smithz

Greg N.

Toby Inkster

Guest

Neredbojias

Neredbojias

Gregory.Spencer

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads