Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    multiple <select> positioning help

    Ola,

    I have 3 select boxes on my form. One for month, day, and year. As it stands now the boxes are listed vertically. My question is how can I line them up horizontally. For example:

    Current layout:

    month
    day
    year

    Targeted layout:

    month day year

    The over all layout is built with tables and divs. Here is my code:

    Code:
    			<div class="text-area">
    			<form action="#" id="companyForm">
                <div> <!-- form start -->
                    <div id="form1">
                        <p>This is an order form for clients new to services.</p>
                            <table>
                            <tr>
                                <td>
                                    <p>What is the name of the new client's business?</p>
                                        <input type="textbox" name="cbizname" />
                                            <br />
                                    <p>Please enter the targeted businesses website URLs.</p>
                                        <textarea name="targeturl" cols="40" rows="5"></textarea>
                                </td>
                            </tr>
                            </table>
                       </div>
                   
                        <div id="form2">
                            <p>provide Pay Per Click (PPC) Services to this client?</p>
                                <table>
                                <tr>
                                    <td>
                                        <label><input type="radio" name="ppcyes" /> Yes</label>
                                        <label><input type="radio" name="ppcno" /> No</label>
                                        <label><input type="radio" name="ppcnotnow" /> Not Right Now</label>
                                        <!-- if no/not right now goto form4 -->
                                    </td>
                                </tr>
                                </table>
                        </div>
    
                   
    
    
                    <div id="form3">
                        <p>Please enter the requested metrics for the lifetime of the Pay Per Click campaign:<p>
                            <table>
                            <tr>
                                <td>
                                    <label>Targeted Clicks <input type="text" name="targetclicks" /></label>
                                    <label>Targeted Cost Per Click <input type="text" name="targetcpc" /></label>
                                    <label>Targeted Click to Action Percent <input type="text" name="targetctap" /></label>
                                
                                     <p> PPC services are billed at the greater of $1500 or 16% of search engine marketing spend.</p>
                                     <p>Date on which Pay Per Click Management begins:</p>
                               </td>
                            </tr>
                                    
                                    <tr>      
                                    <td>
                                    <select name="ppcstart_month" style="width: 100px" display: inline;>
    	                                <option> - Month - </option>
    	                                <option value="January">January</option>
    	                                <option value="Febuary">Febuary</option>
    	                                <option value="March">March</option>
    	                                <option value="April">April</option>
    	                                <option value="May">May</option>
    	                                <option value="June">June</option>
    	                                <option value="July">July</option>
    	                                <option value="August">August</option>
    	                                <option value="September">September</option>
    	                                <option value="October">October</option>
    	                                <option value="November">November</option>
    	                                <option value="December">December</option>
                                    </select>
    
    
                                    <select name="ppcstart_day" style="width: 100px";>
    	                                <option> - Day - </option>
    	                                <option value="1">1</option>
    	                                <option value="2">2</option>
    	                                <option value="3">3</option>
    	                                <option value="4">4</option>
    	                                <option value="5">5</option>
    	                                <option value="6">6</option>
    	                                <option value="7">7</option>
    	                                <option value="8">8</option>
    	                                <option value="9">9</option>
    	                                <option value="10">10</option>
    	                                <option value="11">11</option>
    	                                <option value="12">12</option>
    	                                <option value="13">13</option>
    	                                <option value="14">14</option>
    	                                <option value="15">15</option>
    	                                <option value="16">16</option>
    	                                <option value="17">17</option>
    	                                <option value="18">18</option>
    	                                <option value="19">19</option>
    	                                <option value="20">20</option>
    	                                <option value="21">21</option>
    	                                <option value="22">22</option>
    	                                <option value="23">23</option>
    	                                <option value="24">24</option>
    	                                <option value="25">25</option>
    	                                <option value="26">26</option>
    	                                <option value="27">27</option>
    	                                <option value="28">28</option>
    	                                <option value="29">29</option>
    	                                <option value="30">30</option>
    	                                <option value="31">31</option>
                                    </select>
    
    
    
                                    <select name="ppcstart_year" style="width: 100px";>
    	                                <option> - Year - </option>
    	                                <option value="2010">2010</option>
                                    </select>
                                    </td>
                                    </tr>
                   
                            
    
    
    
    
            
                            </table>
                   </div>
    
                   
    
    
                    <div id="form4">
                        <p>form 4</p>
                    </div>
    
                  
    
     
                    <div id="form5">
                        <p> form 5 </p>
                    </div>
    
                   
    
                    <div id="form6">
                        <p>form 6</p>
                    </div>
    
                   
    
    
                    <div id="form7">
                        <p>form 7</p>
                    </div>
    
                    
    
    
                    <div id="form8">
                        <p>form 8</p>
                    </div>
    
                   
    
    
                    <div id="form9">
                        <p>form 9</p>
                    </div>
    
    
                    
                </div> <!-- form end -->
                </form>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Put them in a list and float the <li> left....similar to navigation tabs.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •