aligning li to the bottom of ul

by Andy Bulka

HTML

<div class="outer">
<div class="inner">
    this is the inner
    <ul>
        <div>
            <li>one</li>
        </div>
        <div>
            <li>two</li>
        </div>
        <div> <li>three</li> </div>
        <div> <li>four</li> </div>
        <div> <li>five</li> </div>
    </ul>
    </div>
</div>

<div class="fred">
    this second attempt is simpler
    <ul class="outer">
            <li class="inner">oaaaaane</li>
            <li class="inner">bbbbbb</li>
            <li class="inner">sss</li>
            <li class="inner">bbbsdfsbbb</li>
    </ul>
</div>

CSS

div.outer { height: 12em; background:yellow; position:relative; }
div.inner {
    background:olive; 
    position:absolute; bottom:0;    
}
ul { background:cyan; 
}
/* attempt 2 */
div.fred {
    background-color: orange;
    height:200px;
    position: relative;
}
ul.outer {
    background-color: pink;
    position: absolute;
    bottom: 0;
}