Question

Please consider this code here, also given is this fiddle: http://jsfiddle.net/DPNc6/

HTML:

<div style="width:500px" id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>​

JS;

$('#radio').buttonset()​

As you all can see, I am trying to make the whole buttonset fill a width of 500px, but using this style attribute does not seem to do anything. How do I set the width of the whole buttonset to but some number of pixels?

Thanks!

Answer 1

I believe the best cross-browser compatible solution that will work for a variable number of buttons is to wrap it in a table: http://jsfiddle.net/DPNc6/1/