22

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.

4

2 Answers 2

33

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/

7

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

11
  • And note that there was a position relative on the parent of the absolute item. That's the problem... it doesn't seem to work with table-cell. So I'm wondering if anyone knows some CSS to make it work in Mozilla
    – Andrew
    Jul 8, 2013 at 12:24
  • Thanks @Nathan Lee. This solves the spacing issue but the Buttons don't occupy the entire width of the table-cell and that's part of the requirement. Together, the buttons should stretch to occupy the full width of the parent container.
    – Andrew
    Jul 8, 2013 at 12:38
  • I noticed that I could also solve the spacing by putting the Button in a DIV that was positioned relatively. ie: jsfiddle.net/vPkNd/3 However, I still can't get the button to occupy the entire width and height of the table-cell.
    – Andrew
    Jul 8, 2013 at 12:40
  • I got another step closer: jsfiddle.net/vPkNd/4 The Buttons are occupying the full width but not the height.
    – Andrew
    Jul 8, 2013 at 12:43
  • To your original code, you just needed to change this css. #menu .button Button { width: 100%; } Thats it. - @Andrew
    – Nitesh
    Jul 8, 2013 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.