Re: Relative positioning

Greetings,

Ian Hickson wrote:
> 
> On Mon, 31 Jan 2000, firespring wrote:
> > At the risk of being chastised for what might be perceived as a "how
> > to" question, what I'm wondering is if there is any mechanism in CSS
> > for positioning one element box relative to an absolutely positioned
> > box of another element?
> 
> Not currently, so this is not off-topic...
> 
> 
> > I mean, with absolute positioning, elements are positioned
> > completely independently as if they have no knowledge of each other,
> > and with relative positioning, elements are positioned only relative
> > to the normal flow. This effectively means that the two types of
> > positioning can't really be used together very well, and what seems
> > to be missing is a mechanism for positioning one element relative to
> > an absolutely positioned (and perhaps named) element, thereby
> > avoiding potential overlap problems.
> 
> Can you give us a more concrete example?
> 
> 

Okay. Look at my test page at:

http://www.firespring.com/testcssp1.html

(Yes, I know it's ugly, but it's a TEST page.)

Everything on this page is placed using absolute positioning. There is
no inline flow, other than the inline flow within the MAIN div. NOTE
the position of the address information at the bottom.

Then look at a modified version of this page at:

http://www.firespring.com/testcssp2.html

The only change between pages is that I added a "bottom: 200px;" to
the attributes for MAIN, just to show that it doesn't work (at least
in IE5 or NS4.7; I haven't checked others yet).

NEXT, take a look at:

http://www.firespring.com/testcssp3.html

The change here is that I added one paragraph of text to the MAIN div,
but made no change to the position of the FOOTER div. The result is
that they now overlap egregiously.

Looking at:

http://www.firespring.com/testcssp4.html

I have eliminated the absolute positioning of the address text, allowing
it to be placed as part of the inline flow. It now appears near the
top of the page, partially obscured by the SIDEBAR and MAIN divs. Obviously,
inline positioning is of little value for this page, unless I were to add a
lot of spacer paragraphs, and even then, the page would not appear
consistent across browsers because of their individual variations in
font-size, line-height, etc.

The main problem I'm trying to illustrate of course, is that what one 
wants in this page is for the address information to be placed at the 
bottom of the page in such a way that it will not overlap or interfere
with the text in the MAIN div, and that if text is removed from the MAIN
div, the address info will move up the page so as to not leave a large
empty space in the middle, as in:

http://www.firespring.com/testcssp5.html

(Note: Overall what I was trying to do with this page is see if some kind of 
layout could be developed that resembled commonly-used FRAMES-based pages AND
that worked well in the latest versions of the most commonly used browsers. 

What I think is needed is some means of letting one box (in the case
of my examples, the FOOTER box) inherit its top-left position from the
bottom-left position of another element (in this case, my MAIN element)
such that their relative positions could be maintained while still allowing
their properties like color, text-align, etc., to be defined independently. 

FWIW, it is, of course, possible to construct something akin to what I
wanted by using relatively positioned boxes within absolutely positioned
boxes, as seen in:

http://www.firespring.com/testcssp6.html

But obviously, this presents some difficulties as can be seen by looking
at the previous link with Netscape, or by looking at:

http://www.firespring.com/testcssp7.html

with either IE5 or NS4.7

(As an aside, can anyone tell me why NS changes the address text in FOOTER
from green to black when the WIDTH of the div, INNER was changed? This
strikes me as MOST curious. And while I'm asking for things, could anyone
tell me why line-height doesn't work AT ALL in NS - as opposed to being
"buggy" as Eric's list defines?)

At the very least, I think what I am proposing would be a useful alternative
positioning mechanism, and at best, it could minimize some of the 
difficulties with things like CLIP, OVERFLOW, etc.. In the case of the
example above, it would have also allowed the PAGE background to have
shown through INNER (well, FOOTER really, since there would have been no
need for INNER).

In any case, that's my novice's two cents worth. What do you experts think?

Sincerely,

Rick Johnson
firespring@nfx.net

Received on Tuesday, 1 February 2000 10:56:23 UTC