Question

Ok so basically I have:

<div style="overflow-x:scroll">
    <div class="content">
        <div class="text"></div>
        <div class="seperator"></div>
    </div>
</div>

I want to position the bottom div (its basically a sort of horizontal line) on the bottom of the content div

I’ve tried the position: absolute embedding a position: relative div tag, but because the top div is scrollable the seperators remain fixed when I scroll

How would I go abouts getting this done (I have to use the seperator in the class=content div so it doesnt ruin the background I have set for it

Edit: Ok so my seperator has some shadows and stuff so I need it to overlay with the content, so I need some kind of absolute positioning, but not to the page, to the ‘top div’

Is there a way to relatively position it so it’ll always be at the bottom of the parent div?

Answer 1

#top-div { position:relative; /* fixed height or width */ }
#bot-div { position:absolute; bottom:0 }