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

Question

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> 

Answer 1

.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

Answer 2

I run to a similiar problem. The solution from Val is good, but has one issue - the inner div will stick to bottom, but it will not affect the height of parrent div, thanks to its "position: absolute;" (it is out of the page layout flow).

So here is my expanded solution for anyone having similiar problem:

.wrapper {     position: relative;     padding-bottom: 50px; }  .wrapper .bottom {     position: absolute;     bottom: 0px;     height: 50px; } 

As you can see, I set height of the .bottom ang padding-bottom of the wrapper. Disadvantage is, that the height of the footer is on two places. But I think it is a good solution for example for product list, where there is fixed height in footer of the box (like for price etc).

Remember, that everytime you set "position: absolute;", the element will be absolutely positioned against first parent div, which has set position attribute. Or, eventualy, against the page itself.