Question

I’m having trouble forcing these buttons to dynamically resize with the page to fill 100% of the DIV (33% each).

This gets me close, but its not perfect, and it is worse the wider the page is. I’ve tried setting the width to 33%, but that makes it really narrow.

Is there a better way to do this?

JQuery $(window).resize event code:

var myWidth = $(window).width() - 1.3*($(window).width() - $('#eventForm').width());
$('.eStatusLabel').css("width", myWidth/3);

HTML code :

<div class="ui-block-b" id="statusDiv" >
    <fieldset data-role="controlgroup" data-mini="true" data-type="horizontal" >
        <input type="radio" name="rdStatus" id="eventStatus1" value="yes" />
        <label class="eStatusLabel" for="eventStatus1" >Yes</label>
        <input type="radio" name="rdStatus" id="eventStatus2" value="maybe" />
        <label class="eStatusLabel" for="eventStatus2" >Tentative</label>
        <input type="radio" name="rdStatus" id="eventStatus3" value="no" />
        <label class="eStatusLabel" for="eventStatus3" >No</label>
     </fieldset>
</div>

Answer 1

$('.eStatusLabel').css("width",(($('#statusDiv').width()/3)-1));

you should use this