html - Position relative not working with display table-cell?

Question

I've created a horizontal menu composed of buttons. I need these buttons to resize in width so that together they occupy 100% of the width of the menu container. It should act the same way a TD does inside a TABLE.

As such, here's the code I came up with:

<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>

and my CSS:

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}

#menu {
    display: table-row;
}

#menu .button {
    position: relative;
    display: table-cell;
}

#menu .button Button {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

This works perfectly in every browser except Mozilla. Mozilla doesn't seem to respect the relative position of the button class and, as such, the Buttons all get positioned absolutely one of top of each other (instead of absolutely inside the DIV with class "button").

After some further research, it seems this is a known issue with Mozilla not respective position "relative" when display is set to "table-cell".

Does anyone know a work around to achieve what I'm looking to do?

Note: The menu is dynamic so I don't know how many buttons there will be so I can't provide percentage widths for each button.

Answer 1

Using position: relative in a table cell is not defined

The CSS specification at W3.org says that the effect of position: relative is undefined for table-cell and other table elements.

See: http://www.w3.org/TR/CSS21/visuren.html#choose-position for more details.

As a result, some browsers seem to allow table cells to behave like a containing block for any absolutely positioned child elements within the table cell (see http://www.w3.org/TR/CSS21/visuren.html#comp-abspos for more details). However, some browser do not try to extend the specification and disregard position: relative when applied to table cells.

You are seeing normal behavior for a compliant browser, but for behaviors not defined by the CSS specification, browsers are free to do or not to do what they please, so results will vary.

How to Work Around This

What I do for these situations, I place a block level wrapper element within the cell that has absolute positioning (I set the offsets so that the wrapper fills the table cell), and then absolutely position my inner child elements with respect to the wrapper.

Making Buttons Scale both in Width and Height

The following CSS will allow the button element to fill up the width and height of the table cell:

body, html {
    height: 100%; /* if you want a to fil up the page height */
}
#menubar {
    width: 100%;
    height: 100%; /*or else fix this height... 100px for example */
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {
    display: table-cell;
    border: 1px dotted blue;
    height: 100%; /* scale the height with respect to the table */
}
#menu .button Button {
    width: 100%;
    height: 100%; /* scale the height with respect to the table cell */
}

You need to set a height for the #menubar and then make sure that both the table-cell and the button have height: 100% (think of a chain of inheritance, table to table-cell and then table-cell to button).

Fiddle: http://jsfiddle.net/audetwebdesign/7b9h9/