I'm attempting to create a 100% width toolbar. This toolbar needs to have a variable number of buttons aligned to the left side, as well as a variable number of buttons aligned to the right. That's the easy part.

But now I want to put a jQuery UI slider in the center that takes up the full remaining space between the buttons on the left and the buttons on the right. I'm having troubles figuring out a pure-CSS way of doing this.

I've tried something like below, but I really don't want to have fixed percentage widths. If there is only one button on the left and one on the right, then I want the centered slider to take the full space between them, not just 33% of the full width.

.toolbar {width: 100%;}
.toolbar .toolbar-left {float: left;width: 33%;}
.toolbar .toolbar-right {float: right;width: 33%;}
.toolbar .toolbar-center {margin: 0 auto;width: 33%;}

I'm using UI Buttons for my buttons and styling -- see an example. In that example, there is a toolbar that is the full width of the page. Imagine the two right most sets of buttons being aligned to the right of the toolbar. Then in the middle empty space, I want to put a UI Slider, and use all the space between buttons (minus some padding).

Is there a way to do this with CSS, or will I need to whip up some javascript to position things properly?