Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Relative bottom positioning won’t work

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #30350
    tomasjj11
    Member

    Here is a link to the web page I am having the problem with.http://www.flow23.co.uk/newMarque/xhtml/index.html

    This site is a recreation in jQuery of a flash site. Here is the original site that I am trying to recreate. http://www.marquetraining.com

    All the p’s in the coloured boxes need to be anchored to the out site edge as the animation affects the inside edge. This would stop the p’s from moving when the animation occurred. The problem I am having is that the p in the blue box wont anchor to the bottom of it’s parent using bottom:0px; I have set the all p’s as position:relative; I did also set their parent divs to relative also but this didn’t affect it at all.

    I am completely stuck if anyone could help i would be highly appreciative.

    Thanks Tom

    #79068
    hebe
    Member

    I guess you used HTML in your comment and it was auto-removed, but I assume the missing content is p’s? Try clicking the “code” button if you need to insert code in your comments =)

    Anyhooo… if I assumed right, this should fix your problem:


    #boxes {
    position: relative;
    ...
    ...
    }

    #blue p {
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    }

    That is:
    You have to set the parent as RELATIVE and the child as ABSOLUTE.
    The child will then be absolute positioned relative to its parent.

    #270303
    henrixd
    Participant

    One thing to check for. For me it was that my container div had size of 0 x 0 px after setting the inner elements to position absolute.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.