Как выровнять блоки по нижней части div-а?

[verfaa]

Есть div: <div class="row ms2_product">:
CSS:

.ms2_product {
width: 190px;
height: 320px;
float: left;
display: inline-block;
margin-right: 10px;
overflow: hidden;

Внутри этого div-а присутствуют ещё 2 div-а:

<div class="span2">
    <img src="images/c2.jpg">
</div>
    <div class="row span10">
        <p><a href="plitka.html">Бордюр ...</a>
    </div>

По умолчанию они прижаты к верхнему краю.
Как прижать их к нижнему краю?
Пробовал прописывать для ms2_product span2 и span10 vertical-align: bottom;
не помогло

 

[xoxmo]

Есть div: <div class="row ms2_product">:
CSS:

.ms2_product {
width: 190px;
height: 320px;
float: left;
display: inline-block;
margin-right: 10px;
overflow: hidden;

Внутри этого div-а присутствуют ещё 2 div-а:

<div class="span2">
    <img src="images/c2.jpg">
</div>
    <div class="row span10">
        <p><a href="plitka.html">Бордюр ...</a>
    </div>

По умолчанию они прижаты к верхнему краю.
Как прижать их к нижнему краю?
Пробовал прописывать для ms2_product span2 и span10 vertical-align: bottom;
не помогло

1. для главного блока надо добавить position:relative;
2. для внутренних блоков надо добавить position:absolute;
3. далее внутренние блоки прижать при помощи bottom:0; для одного и bottom:25px; для другого (25px это цифра с потолка, надо ставить в зависимости он высоты блока)
примерно так: Для просмотра ссылки Войди или Зарегистрируйся (для наглядности основному блоку добавил border:1px solid black; )