Firefox issue with div's as table cell

Question

I am trying to create a transparent overlay on a background image with a Fontawesome chevron, as shown in the design comp below.

After trying all sorts of things to get three floated DIVs to look like this, I resorted to using

display:table-cell

for the divs to the left and right with the white background, and the keep the DIV with the chevron in the middle a block.

This works fine in IE and Chrome, but Firefox pushes the DIV in the center down for some reason. This is a problem in the final version with the transparent image because I need to keep this DIV exactly 160 pixels wide. Width and Max-width don't seem to work with display: table-cell.

Here is the jsFiddle.

Question 1: How can I get this work in FF?
Question 2: Is there a better way (short of using a single image with the round cutout wide enough to account for 4K monitors)

Answer 1

In order to get it to work in FF, you simply need to add vertical-align: top to the .whitebox element. Since it is a table-cell element, it will respect the vertical-align property and align itself as you would expect.

Updated Example

.jumbotaboverlay .whitebox {
    background-color: white;
    border: 1px solid black;
    display: table-cell;
    width: 50%;
    height: 100%;
    vertical-align: top;
}

In regards to your other question, it is completely dependent on what browsers you are trying to support.