- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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.
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.