How can I stick a div to the bottom of another div?

Question

Okay, so this is the parent div:

#left {
    width: 50%;
    height: 100%;
    background-color: #8FD1FE;
    float: left;
    opacity:0.75;
    filter:alpha(opacity=75);
    -webkit-transition: all .45s ease;  
    -moz-transition: all .45s ease; 
    transition: all .45s ease; }

And this is the div inside the div:

#reasons {
background-image:url('arrow1.png');
background-repeat: no-repeat;
height: 94px;
width: 400px;
margin: 0 auto 0 auto; }

I've tried a bunch of different methods, but I can't seem to keep the the second div centered and stuck to the bottom of the first div.

Answer 1

First, make the outer div a layout parent:

#left {
     /* ... */
     position: relative; /* anything but static */
     /* ... */
}

Now let's fix the inner div to the bottom:

#reasons {
    /* ... */
    position: absolute;
    bottom: 0;
    /* ... */
}

Now it's fixed to the bottom, but we need to center it:

#reasons {
    /* ... */
    left: 50%;
    margin: 0 0 0 -200px; /* 200px is half of the width */
    /* ... */
}

See a demo on JSFiddle.