css - problems placing submit button in a responsive web page -

i have web page displays 1 dropdown box when page loads, , submit button beside it. depending on option user selects dropdown, make ajax calls , if data returned, display drop down list more options. 2 times, in total, can have 3 drop downs on page side side. while, submit button supposed to right of last drop down box that's displayed.

problem:

depending on mobile device i'm using navigate site, submit button overlaps first drop down box if there's plenty of room on row. same thing happnes when second drop down appears. how can ensure regardless of device, submit button appears beside first drop down?

code:

i'm showing html... ajax works. ajax code adds select boxes within each div tag.

<div class="row-fluid">         <div class="span12" id="l1locations">             <h2><?php echo $title;?></h2>              <div class="span3">                     <h4>branch:</h4>                     <select name='l1locations' id='l1locations'>                         <option selected value''></option>                         <?php                             foreach ($branches $key=>$value)                             {                                 echo '<option value="'.$key.'">'.$value."</option>";                             }                          ?>                     </select>                </div>             <div class="span3" id="l2locations"></div>             <div class="span4" id="l3locations"></div>             <h4>&nbsp;</h4>             <button class="btn search">search</button>         </div> </div> 

what i've tried far:

i've increased spans span3 span4 first 2 drop downs , works. when page displays, button super far away first drop down. there simpler way i'm missing?

thanks.

edit 1

here's code showing rendered html... first drop down populated, , submit button overlapping it:

<div class="container-fluid" id="locationsbar">              <div class="row-fluid">             <div class="span12" id="l1locations">                 <h2>show location:</h2>                  <div class="span3">                         <h4>branch:</h4>                         <select name='l1locations' id='l1locations'>                             <option selected value''></option>                             <option value="185">loc1</option><option value="63">loc2</option><option value="198">loc3</option><option value="197">loc4</option><option value="196">loc5</option><option value="110">loc6</option><option value="8">loc7</option></select>                    </div>                 <div class="span3" id="l2locations"></div>                 <div class="span4" id="l3locations"></div>                 <h4>&nbsp;</h4>                 <button class="btn search">search</button>             </div>     </div>     <!-- display results -->     <div class="row-fluid">                  <div class="span12 visible-desktop visible-tablet" id="l1locations">                         <table id="switchrecords" name="switchrecords" class="table table-bordered">                          </table>                 </div>                  <div class="span12 visible-phone" id="l1locations">                         <div id="mobileswitchrecords">                          </div>                 </div>                    </div> </div> 

edit 2

here's html that's generated populate second drop down via ajax:

sub loc 1:allb1b2b124b97b89

had alert statement / console.log because ajax doesn't update actual code on page ...

i assume markup this

<div class="row-fluid">     <div class="span3" id="l1locations">         <h4>branch:</h4>         <select name='l1locations'>             <option selected value=''></option>         </select>     </div>     <div class="span3" id="l2locations">         <h4>branch:</h4>         <select name='l2locations'>             <option selected value=''></option>         </select>     </div>     <div class="span3" id="l2locations">         <h4>branch:</h4>         <select name='l2locations'>             <option selected value=''></option>         </select>     </div>     <button class="btn search">search</button> </div> 

try adding css

@media (min-width: 768px) {     #l1locations, #l2locations, #l3locations {         float: none;         display: inline-block;         margin: 0;         width: auto;         text-align: left;     }     .row-fluid {         text-align: center;     }     select {         margin: 0;     } } 

this make columns take width of content , appear side side on large screens (>= 768px) using display:inline-block; instead of floats. behavior in small devices remains unaffected, bootstrap makes columns in small devices act block elements (taking full of container)

demo 3 selects

demo 1 select

update

in response comment, similar effect using default bootstrap grid system, need 2 things:

1. fix markup, when want nest rows, need include <div class="row-fluid"> inside column, every direct descendant of .row-fluid should elements class .spanx, means can't have <button> sibling of spans
2. since .spanx elements take specified width when they're empty, button away first select unless dynamically append second , third .span3 columns ajax callback

so you'd have initial markup

<div class="row-fluid">     <div class="span12">         <h2>my title</h2>         <div class="row-fluid"> <!--you need define nested row-->             <div class="span3" id="l1locations">                 <h4>branch:</h4>                 <select name='l1locations'>                     <option selected value=''></option>                 </select>             </div>             <div class="span3">                 <h4>&nbsp;</h4>                 <button class="btn search">search</button>             </div>         </div>     </div> </div> 

and dynamically append other selects wrapped in columns

see demo