Vertical align using table method?

Question

I'm trying to vertically align using the table/table-cell method.

JSFiddle

<div class="row">
    <div class="small-6 columns valign">vertically align me</div>
    <div class="small-6 columns"><p>content</p>.....</div>
</div>

.row{
    display: table;
}

.valign{
    display: table-cell;
    vertical-align: middle;
    background: grey;
    height: 100%;
}

But it's not working, where am I going wrong? I suspect it is something to do with the height of the valign column. How can I get this to stretch to the height of it's parent?

I should also mention in my actual code I have the code nested quite deep in the page, so it's inside article and section tag and another div too.

Answer 1

On some browsers CSS property float does not work with display: table-cell so you should set float: none to table-cell elements in order to make them act like table cells

https://jsfiddle.net/zac926wL/5/