How to make div stick to the bottom of parent div?
.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
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.