Вертикально выравнивать элементы в нижней части их родительского элемента?

Question

У меня есть столбец с 3 колонками, и мне нужно, чтобы все элементы внутри были выровнены по вертикали на дно. На данный момент, дивы были прижаты к вершине: http://jsfiddle.net/tmyie/SMtW6/1/

.col33 { 
    width: 33%; 
    float: left; 
    background-color: red; 
    font-size: 90%; 
} 

.col33 > ul, .col33 > p { 
    margin-bottom: 0; 
    padding-bottom: 0; 
} 

Однако, поскольку это всего лишь фрагмент кода гораздо большего места, я не решаются сделать эти поплавки в inline-blocks. Есть ли какая-либо разметка или CSS, которые я могу добавить, чтобы сделать дочерние элементы .col33 вертикально выровнены по низу?

Answer 1

Обновление CSS от col33 к

.col33 { 
    width: 33%; 
    background-color: red; 
    font-size: 90%; 
    height: 100px; 
    display: table-cell; 
    vertical-align: bottom; 
} 

Здесь есть рабочий пример http://jsfiddle.net/SMtW6/3/

Answer 2

Update .col33, как указано ниже:

• Удалить поплавок: левый
• Добавить дисплей: стол-элементная
• Добавить вертикального выравнивания: средний

Проверьте ниже CSS для того же:

.col33 { 
    width: 33%; 
    background-color: red; 
    font-size: 90%;; 
    vertical-align:middle; 
    display:table-cell; 
} 

Fiddle