CODEWITHSUNDEEP
cssfirefoxbuttonstyling
Björn
Björn

Reputation: 13207

Firefox not expanding absolute positioned div containing buttons

I have two divs, both positioned absolute, one inside the other, serving as a menu. In the inner one I have some button elements that should expand the parent div. Fine in theory, Chrome and IE. But I cant get it to work in Firefox. The buttons dont expand the parent div.

Oddly it works if I add an extra a tag element after the buttons.

Css

/* .Menu-Wrapper and .Menu have to have postion: absolute */

.Menu-Wrapper {
    position: absolute;
    top: 100px;
    left: 100px;
}
.Menu {
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px;
}
.Menu-item {
    background: red;
    border: 0;
    margin: 2px;
    padding: 0;
    display: block;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

html

<div class="Menu-Wrapper">
        <!-- there would be a trigger button here, left out for simplicity -->
    <div class="Menu">
        <!-- in firefox the follwoing buttons do not expand to width text -->
        <button class="Menu-item">Menu Point 1 ....</button>
        <button class="Menu-item">Menu Point 1</button>
        <button class="Menu-item">Menu Point 1..</button>
    </div>
</div>

See Example here:

http://jsfiddle.net/2Xbpq/ (not working in Firefox)

Any idea how to make it work in Firefox?

Upvotes: 2

Views: 982

Answers (1)

Adrift
Adrift

Reputation: 59829

Use width: -moz-available;

jsFiddle

It'll fix it, though I'm not quite sure why ff is acting strange in this context ..

Upvotes: 5

Related Questions