Absolute positioning inside table-cell, Firefox and Chrome

Question

I'm trying to build a sub navigation menu for which I've decided to use display: table.

It's a horizontal submenu with 4 columns and in each columns there is a variable amount of links. What I need to do is to display a link in each column, besides those links I just mentioned, aligned at the bottom, so something like:

first column | second column
             |
link1        | link1
link2        | link2
link3        | link3
             | link4
             |
bottom link  | bottom link

What's important is that the bottom links are vertically aligned.

I recreated the whole thing in a jsfiddle: http://jsfiddle.net/skn2dshv/7/

One of the main issues, besides it not working properly, is that it behaves differently between firefox and chrome. On Firefox, the bottom link appears inside the table-cell container, as it should be, while on Chrome it appears outside.

I also had a look ath this: http://davidwalsh.name/demo/table-cell-position-absolute.php But still couldn't figure out what's wrong in my code.

Answer 1

try this:

#gallery-submenu .dropdown-column .all-link {
    top: 100%;
    position: absolute;

    text-transform: uppercase;
}

it puts your link at the end of all 100% height of column-links-wrapper. jsfiddle Demo

if you want all your links in row you should give column-links-wrapper a static height. jsfiddle Demo