SOpt - Fixar elementos no rodapé da div

http://pt.stackoverflow.com/questions/39378/fixar-elementos-no-rodap%C3%A9-da-div

HTML

<ul>
    <li>
        <div class="footer">
            <h2>teste</h2>
            <span>Info</span>
        </div>
    </li>
</ul>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ul {
    margin: 10px;
    padding:0;
    list-style:none;
}

ul li {
    width:220px;
    height:220px;
    background:#999;
    position:relative;
    float:left;
    margin:10px;
}

ul li div.footer {
    width:100%;
    padding:8px 20px;
    position:absolute;
    bottom:0;
    background:rgba(0,0,0,0.8);
}

ul li div.footer h2 {
    font-size:18px;
    color:#336699;
    margin:0;
    padding:0;
}

ul li div.footer span {
    display:block;
    color:#e1e1e1;
}