problems with relative positioning

[Fredo Vincentis]

Hi,

I am having difficulties positioning a DIV relative to the previous DIV in
the code. I am not quite sure why this isn't working, but I tested in IE 5
and NN 7 and both refuse to do what I want (guess it must be my fault,
hey?).

I want the bottom DIV (containing text links, copyright, disclaimer, etc) to
appear after everything else. For some unusual reason he puts it to the
bottom of the page, but still overlaps the previous DIV:

http://www.addictivemedia.com.au/rmit/contacts.htm

Any idea why this is and how I can fix it?

Thanks heaps!

 

[Steve Pugh]

I am having difficulties positioning a DIV relative to the previous DIV in
the code. I am not quite sure why this isn't working, but I tested in IE 5
and NN 7 and both refuse to do what I want (guess it must be my fault,
hey?).

I want the bottom DIV (containing text links, copyright, disclaimer, etc) to
appear after everything else. For some unusual reason he puts it to the
bottom of the page, but still overlaps the previous DIV:

http://www.addictivemedia.com.au/rmit/contacts.htm

Way too much positioning.

Absolute positioning moves the element right out of the document flow
and so it's height isn't counted at all.

Relative position moves the element but leaves a space where it would
have been.

You have an absolutely positioned header
Then a relatively positioned content area.
Then a footer.

The footer is placed after where the content area would be if it had
not been moved via relative positioning. This is what should happen
for the styles you have used.

I don't think you need to use positioning at all in your page. It can
all be done with floats and margins.

You also have multiple id="contact" and id="contactline". IDs must be
unique within a document. Change them to class.

Steve

 

[Fredo Vincentis]

Way too much positioning.

Absolute positioning moves the element right out of the document flow
and so it's height isn't counted at all.

Relative position moves the element but leaves a space where it would
have been.

You have an absolutely positioned header
Then a relatively positioned content area.
Then a footer.

The footer is placed after where the content area would be if it had
not been moved via relative positioning. This is what should happen
for the styles you have used.

I don't think you need to use positioning at all in your page. It can
all be done with floats and margins.

The only thing I ever used floats for is to put two DIVs next to each other.
Can you give me an example of how to position the elements with floats and
margins?

You also have multiple id="contact" and id="contactline". IDs must be
unique within a document. Change them to class.

Ooops, I knew I was going to forget about changing the id to class. I
originallky only had one contact and then it changed to multiples. I will
make that change. Thanks!

 

[rf]

Hi,

I am having difficulties positioning a DIV relative to the previous DIV in
the code. I am not quite sure why this isn't working, but I tested in IE 5
and NN 7 and both refuse to do what I want (guess it must be my fault,
hey?).

I want the bottom DIV (containing text links, copyright, disclaimer, etc) to
appear after everything else. For some unusual reason he puts it to the
bottom of the page, but still overlaps the previous DIV:

http://www.addictivemedia.com.au/rmit/contacts.htm

Any idea why this is and how I can fix it?

Way way too much positioning, especially relative. You should only use
relative positioning in exceptional circumstances, like to superscript
something (top -.3em) or to provide a containing element (top: 0) so child
elements may be positioned absolutely within that element, which doesn't
work properly with IE anyway.

Your problem is better stated the other way round: the bottom div is
positioned correctly in the flow but the main content div is overlapping
this bottom div, because you have relatively it positioned 116 pixels down
from where it would have been. It is therefore overlapping the bottom div by
116 pixels.

Go to the spec and read up on what absolute and relative positioning does to
the flow. To sum it up the sequence is: 1) remove any absolutely positioned
elements from the flow 2) lay out the rest of the elements as per the normal
flow 3) move any relatively positioned elements away from where they
currently are.

If you remove all relative positioning then the page will flow correctly. If
you feel you need to position something relatively, for example to achieve
some spacing, don't, use margin or padding. Margins and padding *are* taken
into account in the flow, in step 2 above.

Cheers
Richard.

 

[Leif K-Brooks]

Way way too much positioning, especially relative. You should only use
relative positioning in exceptional circumstances, like to superscript
something (top -.3em) or to provide a containing element (top: 0) so child
elements may be positioned absolutely within that element, which doesn't
work properly with IE anyway.

Works in IE 6 standards mode.