How to align a <ol> to the bottom of the containing <div>?

Problem

I have the following:

ol.progress-tracker {
        margin: 0;
        padding: 0;
        list-style-type: none;
    /*
    position: absolute;
    bottom: 0px;
    */
        }

If I try the commented code, it messes up my other styling and I'm not sure why. Is there another way to push this thing to the bottom in a responsive-design-friendly way? My fiddle is here:

http://jsfiddle.net/4mABB/

Problem courtesy of: SB2055

Solution

If you position a block element absolutely, it looses it's default property of using the whole space horizontally. You would have to specify a width yourself:

ol.progress-tracker { width: 300px; /* or whatever */ }
Solution courtesy of: Linus Caldwell

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.