0

I have a small issue with which I'm struggling.

I need to align a element to the top of a percent div with bottom: 100% but I can't get it to align within the parent div.

So what I need is bottom: 0% to be aligned with the bottom of a div and bottom: 100% to be aligned with the top.

Any ideas?

EDIT:

http://jsfiddle.net/GmAEx/

I want the gray bar in that sample to be aligned to top: using 'bottom' 100%

2
  • 1
    make a fiddle to show your problem Commented Jun 3, 2012 at 13:49
  • more text and less code..please provide the code you have tried so far..
    – Asif
    Commented Jun 3, 2012 at 13:51

2 Answers 2

3

It don't really understand what you mean with bottom: 100%, maybe you mean bottom: 0;?

Also see your updated example.

=== UPDATE ===

Thanks for the comment, I think now I know what are you want to get. The problem is, that bottom: 100% for the 'slider handle' means that it is completly outside the parent div.

Add a wrapper around the parent div which has the complete height minus the height of the slider handle and add a padding with height of slider handle. Replace the parent height with 100%. Move the with, background-color and margin-top to the wrapper too.

Also see bottom: 0%: updated example.

Also see bottom: 100%: updated example.

2
  • Im using jquery UI to make a slider. It uses bottom 100:% when the slider is at the top.
    – johan
    Commented Jun 3, 2012 at 14:29
  • The thing is that it's the bottom of the .child that is relative in this case.. so the bottom 100% will tell the bottom of the .child to go 100% up in the parent, which is on top of the parent.. I see the problem, I'm still pulling my hair for a solution!
    – MNilson
    Commented Jun 3, 2012 at 14:38
0

Presumably this is being dynamically generated, otherwise you'd just use top: 0 instead.

If this is the case, then you probably have something like:

child.style.bottom = y+"%";

In which case, it's a simple matter of adding:

child.style.marginTop = (child.offsetHeight/100*y)+"px";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.