Question

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%

Answer 1

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.