problems with relative positioning

Discussion in 'HTML' started by Fredo Vincentis, Nov 21, 2003.

  1. 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!
     
    Fredo Vincentis, Nov 21, 2003
    #1
    1. Advertising

  2. Fredo Vincentis

    Steve Pugh Guest

    "Fredo Vincentis" <> wrote:

    >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

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

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Nov 21, 2003
    #2
    1. Advertising

  3. "Steve Pugh" <> wrote in message
    news:...
    > "Fredo Vincentis" <> wrote:
    >
    > >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.


    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!

    > Steve
    >
    > --
    > "My theories appal you, my heresies outrage you,
    > I never answer letters and you don't like my tie." - The Doctor
    >
    > Steve Pugh <> <http://steve.pugh.net/>
     
    Fredo Vincentis, Nov 21, 2003
    #3
  4. Fredo Vincentis

    rf Guest

    "Fredo Vincentis" <> wrote in message
    news:bpksl1$2ac6$...
    > 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.
     
    rf, Nov 21, 2003
    #4
  5. rf wrote:
    > 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.
     
    Leif K-Brooks, Nov 22, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob R. Ainscough
    Replies:
    2
    Views:
    1,677
    Rob R. Ainscough
    Feb 7, 2006
  2. Fred Nelson
    Replies:
    1
    Views:
    2,489
    Christopher Reed
    Feb 21, 2006
  3. B. Clay

    Relative Positioning of a Point

    B. Clay, Mar 3, 2004, in forum: Java
    Replies:
    2
    Views:
    385
    Thomas Weidenfeller
    Mar 3, 2004
  4. Tom
    Replies:
    4
    Views:
    434
  5. Stijn Goris

    relative positioning layer

    Stijn Goris, Nov 25, 2003, in forum: HTML
    Replies:
    2
    Views:
    2,447
    Steve Pugh
    Nov 25, 2003
Loading...

Share This Page