Question

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?

Solution

In case it helps anyone, here’s what I came up with to make this work, based on @Ken’s suggestions. Note that it supports multiple toolbar-left and toolbar-right blocks within the toolbar, but only one toolbar-center. I also added a little padding in the code, but that could probably be handled by CSS.

<div class="toolbar ui-helper-clearfix">
<div class="toolbar-left">Left buttons</div>
<div class="toolbar-right">Right buttons</div>
<div class="toolbar-Center">
    <div class="slider"></div>
    </div>
</div>

.toolbar .toolbar-left {float: left;}
.toolbar .toolbar-right {float: right;}
.toolbar .toolbar-center {position: relative;}

$(".toolbar").each(function() {
    var $this = $(this);
    var left = 0;
    $(".toolbar-left", $this).each(function() {
        left += $(this).outerWidth();
    });
    var width = $this.outerWidth() - left;
    $(".toolbar-right", $this).each(function() {
        width -= $(this).outerWidth();
    });
    var $center = $(".sz-toolbar-center", $this);
    width -= ($center.outerWidth() - $center.width());
    $center.width(width - 30);
    $center.css({"left": (left+15)+"px"});
});

One issue to be aware of is that resizing the browser window doesn’t recalculate the toolbar size. So make sure this code gets called whenever the toolbar width is changed, including resizing the browser window, etc.

Answer 1

If you wan’t the left/right parts to be sized to their contents then you’ll need to float them. If you float them you can’t get the center one to fill the remaining space like you want.

Go with JavaScript or use a not-semantic <table> element.