Making a button element fill available width

Question

There are a lot of "fill available space" questions on this site, but my issue is a bit particular in that I've already gotten a solution, but it doesn't work for buttons. I'd like to understand why this doesn't work for buttons, and how I can make it work. I imagine it's just some browser-style for the button element that I need to override.

I have two floating elements within a (fixed-width, if that matters) wrapping div. The right element has fixed width, and the left element should take up whatever width remains.

I can accomplish that by setting the right element to have fixed width and float: right, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set display: block on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure width value I could find on the MDN.

http://jsfiddle.net/wjFbD/2/

---

I don't know why I didn't think of just wrapping the buttons in divs earlier. Here's what I've come up with:

http://jsfiddle.net/SkczB/2/

This involves the overflow: hidden box formatting context trick (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:

1. The two buttons are wrapped in divs with class buttonWrapper.
2. Those divs are formatted according to the trick I outlined in the third paragraph, above. The right div has float: right and a fixed width, the left div has no special styling.
3. We now apply the box formatting context trick. The left div is given overflow: hidden, which causes it to make space for the right-floated div.
4. We can now apply a left margin to the right div, and change its width, and the left div will always be the right size.
5. The divs create the desired "fill available width" effect for us, now we just have to put the buttons inside the divs and give them a height and width of 100%.
6. If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.

Answer 1

This may not be exactly what you're looking for here, but here's an option that seems to have worked out for me with your fiddle.

If you've got a fixed width div that the elements are contained in, you could split get the remaining width of the div after button A has been set to fill up, say, 100 pixels and then set button 2 to be the remaining size.

Alternatively, another option would be to run it as percentages 20%/80%, 30%/70%, that kind of thing. Here's a fiddle that achieves what you're looking for on just the button wrapper at the bottom. I've applied specific classes for it and added divs around each button for a bit more control. The button wrapper divs are set to 20% and 80% respectively, while the button is set to fill 100% of the containing space.

Here's the modified fiddle and the modfied HTML/CSS. Hope it helps for what you're looking for...

http://jsfiddle.net/wjFbD/7/

HTML

<div class="btnWrapper">
    <div class="buttonWrapperB">
    <button class="left">
        button Left
    </button>
    </div>
    <div class="buttonWrapperA">
    <button class="right">
        button Right
    </button>
    </div>
</div>​

CSS

.btnWrapper
{
    width: 100%;
    background-color: #FEE;
    border: 2px solid black;
    margin-bottom: 10px;
    height: 50px;
}

.buttonWrapperB{
    float: left;
    width: 20%;
}
.buttonWrapperB button{
    width: 100%;
    height: 50px;
}

.buttonWrapperA{
    float:left;
    width: 80%;            
}

.buttonWrapperA button{
    width: 100%;
    height: 50px;
}

​