title: Making a button element fill available width
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I can accomplish that by setting the right element to have fixed width and <code>float: right</code>, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set <code>display: block</code> on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure <code>width</code> value I could find on the MDN.</p>
  
  <p><a href="http://jsfiddle.net/wjFbD/2/" rel="nofollow">http://jsfiddle.net/wjFbD/2/</a></p>
  
  <hr />
  
  <p>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:</p>
  
  <p><a href="http://jsfiddle.net/SkczB/2/" rel="nofollow">http://jsfiddle.net/SkczB/2/</a></p>
  
  <p>This involves the <code>overflow: hidden</code> <a href="http://colinaarts.com/articles/the-magic-of-overflow-hidden/" rel="nofollow">box formatting context trick</a> (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:</p>
  
  <ol>
  <li>The two buttons are wrapped in divs with class buttonWrapper.</li>
  <li>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.</li>
  <li>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.</li>
  <li>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.</li>
  <li>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%.</li>
  <li>If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.</li>
  </ol>