title: Mix percent-based width with pixel-based gap?
body: <p>I'm trying to build a button bar component where there can be a variable number of buttons.  I can do anything I need to wrap these buttons, etc, but I need to be able to size the buttons based on percent width inside a div.  Since I'm porting over flash to html5, I need to be able to specify this percent width as well as place a 1-10 pixel gap between the buttons, depending on the implementation.  The buttons themselves are expected to have things like borders, etc, all the usual properties and the buttons will need to be absolutely positioned due to the way the legacy component engine works.</p>
  
  <p>Is there any way through some combination of html / css to create a % width and reduce the size of each button by pixels within that % width?  I realize this could easily be solved using explicit values and jQuery, but for many complicated reasons relating to dynamic resizing / tweening I would strongly prefer to let css handle the positioning.</p>
  
  <p>I started a fiddle below:</p>
  
  <p><a href="http://jsfiddle.net/maKuG/" rel="nofollow">http://jsfiddle.net/maKuG/</a></p>