Question

I’m trying to add a text input and button side by side into a footer, which works fine but i need its width to be 100% i.e Fluid layout. Any help greatly appreciated.

<form method="post" action="send.php">
       <div style="float:left;">
          <input style="" data-mini="true" type="text" name="message" id="message" value="" data-theme="a"/>
       </div>

        <div style="float:left;">
       <input type="submit" id="submit" value="Send Message" data-mini="true" data-theme="a"/>
        </div>
</form>

Answer 1

Just enclose your form elements inside a grid to automatically stretch the inputs like so:

Supplied my own inline-widths to the inputs to stretch them the way i want. You can also create your own class and use that in conjunction with the .ui-block-* class.

<form method="post" action="send.php" class="ui-grid-a">
    <div style="width:80%;" class="ui-block-a"><input style="" data-mini="true" type="text" name="message" id="message" value="" data-theme="a"/></div>
    <div style="width:20%;" class="ui-block-b"><input type="submit" id="submit" value="Send Message" data-mini="true" data-theme="a"/></div>       
</form>

Demo: http://jsfiddle.net/tKcMg/1/