Question

i’m having a problem with some CSS

i have N outside-divs, with variable, dynamic height.
every outside-div will have ONE inside-div, which should be at the bottom of the outside div.

so, using the trick with position absolute like in How do I align an inner div with the bottom of an outer div? is not possible.

I made a jsfiddle for you to play around:
http://jsfiddle.net/xSTtp/4/

HTML:

<div class="outside">
    <div class="inside">
        xyz
    </div>
</div>
<div class="outside">
    <div class="inside">
        xyz
    </div>
</div>

CSS:

.outside { 
    /* the height will be dynamic, 100px is just for the demo */
    height: 100px;
    border: 1px solid green;
}

.inside {
    border: 1px solid red;
    /* not working*/
    /*  display: table-cell;
            vertical-align: bottom;
            */
    /* i want the red at the bottom of the green, not in the page */
    position: absolute;
    bottom: 0;
}

Thanks
Joerg

Answer 1

Why is position: absolute; bottom: 0; not possible?

The wrapper div or parent div needs to have a position: relative; or position: absolute; for it to position the child at the bottom.

.outside { 
    position: relative;
    border: 1px solid green;
}

.inside {
    position: absolute;
    border: 1px solid red;
    bottom: 0;
}