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


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:

Problem courtesy of: SB2055


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


There is currently no discussion for this recipe.

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