m1k3y3 m1k3y3 - 6 months ago 14
Javascript Question

How to make div stick to the bottom of parent div?

Could anyone please help me making

div#bottom
stick to the bottom of the parent
div
, so when I click on the button inside it will allow me to show elements from
div#list
above itself?

Preferably I would want to avoid JS, jQuery, etc. or at least in the layout:

<div class="wrapper">
<div id="top">
<ul>
...
...
</ul>
</div>
<div class="bottom">
<div id="button">
<div id="list">
<ul>
<li>elem 1</li>
<li>elem 2</li>
</ul>
</div>
</div>
</div>
</div>

Val Val
Answer
.wrapper{position:relative;}
.bottom{position:absolute; bottom:0;}

Edited

Thanks to @centr0 and @T.J Crowder the key thing to understand here is that position:relative in .wrapper will "contain" any element that has position:absolute. It's like declaring boundaries for .bottom. Without position:relative in .wrapper, .bottom would break out of that div