title: Position relative not working with display table-cell?
body: <p>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.</p>
  
  <p>As such, here's the code I came up with: </p>
  
  <pre><code>&lt;div id="menubar"&gt;
      &lt;div id="menu"&gt;
          &lt;div class="button"&gt;
              &lt;Button&gt;Button 1&lt;/Button&gt;
          &lt;/div&gt;
          &lt;div class="button"&gt;
              &lt;Button&gt;Button 2&lt;/Button&gt;
          &lt;/div&gt;
          &lt;div class="button"&gt;
              &lt;Button&gt;Button 3&lt;/Button&gt;
          &lt;/div&gt;
          &lt;div class="button"&gt;
              &lt;Button&gt;Button 4&lt;/Button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#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;
  }
  </code></pre>
  
  <p>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").</p>
  
  <p>After some further research, it seems this is a known issue with Mozilla not respective position "relative" when display is set to "table-cell".</p>
  
  <p>Does anyone know a work around to achieve what I'm looking to do?</p>
  
  <p>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.</p>