Mix percent-based width with pixel-based gap?

Question

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.

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.

I started a fiddle below:

http://jsfiddle.net/maKuG/

Answer 1

It's a rather dirty solution, but I usually just use absolute positioning in these cases. Example:

#elmt1 {
    position: absolute;
    left: 0;
    width: 300px;
}
#elmt2 {
    position: absolute;
    left: 300px;
    right: 50%; /* Half way on the page */
}
#elmt3 {
    position: absolute;
    left: 50%;
    right: 0;
}

Answer 2

From my experience % definitions never work as desired in ALL popular browsers... nevertheless simply add some padding or margin spacing in the middle to ensure a 10px gap between the two buttons whilst maintaining % defined layout.

An example CSS for the two buttons:

<style type="text/css">
    .button1 {
        padding-right: 5px;
    }
    .button2 {
        padding-left: 5px;
    }
</style>

<table width=500 height=50 cellpadding=0 cellspacing=0 border=0>
    <tr>
        <td width=50%><div class="button1"> </div></td>
        <td width=50%><div class="button2"> </div></td>
    </tr>
</table>

Then in your HTML table give each button a cell with 50% width each of the parent container.

To answer the second part of your question the best option is a browser sniffer in JavaScript. Get the screen dimensions, do the calculations and size your elements accordingly. You can't define % minus pixel in CSS.

Answer 3

I found the general answer here: CSS 100% height with padding/margin

and applied it to my case below:

<div id="buttonBar">
    <div class="buttonWrapper">
        <div class="innerWrapper"><button>My Button</button></div>
    </div>
    <div class="buttonWrapper" style="left:33.333%;" >
        <div class="innerWrapper"><button>My Button</button></div>
    </div>
    <div class="buttonWrapper" style="left:66.666%">
        <div class="innerWrapper"><button>My Button</button></div>
    </div>
</div>

CSS::

*{
  position:absolute;
}

div#buttonBar{
 width: 300px;
 height: 35px;
 background: #933;
}

div.buttonWrapper{
  width: 33.333%;
  height: 35px;

}

button{
  display: block;
  width: 100%;
  height: 100%;
  border: 6px solid #333;
  background: #eee;
}
div.innerWrapper{
    bottom:0;
    top:0;
    left:0;
    right:0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

There's a lot of wrapping going on, but that part won't interfere with my architecture. Here's the example where it's working:

EDIT: looks like I had a link to the wrong version previously, updated link below: https://jsfiddle.net/hyperthalamus/maKuG/32/

Thanks for all the suggestions.