problems with relative positioning

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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,

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:

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

Thanks heaps!

Re: problems with relative positioning

Quoted text here. Click to load it

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.


"My theories appal you, my heresies outrage you,
 I never answer letters and you don't like my tie."  - The Doctor

Re: problems with relative positioning

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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!

Quoted text here. Click to load it

Re: problems with relative positioning

Quoted text here. Click to load 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.


Re: problems with relative positioning

rf wrote:
Quoted text here. Click to load it

Works in IE 6 standards mode.

Site Timeline