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

Answer 1

Remove right, bottom, top and left positioning from the #menu .button Button

For Instance,

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

Here is the WORKING DEMO

If you want pure display:table-cell; solution, you just need to remove the positioning

For Instance,

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {

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

    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

Here is the WORKING DEMO - 2

EDIT

To stretch the buttons to occupy the width, here is the solution.

The Code:

#menu .button Button {
    width: 100%;
}

Here is the WORKING DEMO - 3

EDIT - 2

As per the request of the OP to imply a provision to add a height to the buttons, here is the solution for the same. The addition of height:100%; is the OP's contribution to this solution.

#menu .button Button {
    display:table-cell;
    width: 100%;
    height:100%;
}

Here is the WORKING DEMO - 4

Answer 2

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/