View Full Version : multiple <select> positioning help

10-28-2010, 05:45 PM

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:


Targeted layout:

month day year

The over all layout is built with tables and divs. Here is my 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>
<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>

<div id="form2">
<p>provide Pay Per Click (PPC) Services to this client?</p>
<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 -->

<div id="form3">
<p>Please enter the requested metrics for the lifetime of the Pay Per Click campaign:<p>
<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>

<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 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 name="ppcstart_year" style="width: 100px";>
<option> - Year - </option>
<option value="2010">2010</option>


<div id="form4">
<p>form 4</p>

<div id="form5">
<p> form 5 </p>

<div id="form6">
<p>form 6</p>

<div id="form7">
<p>form 7</p>

<div id="form8">
<p>form 8</p>

<div id="form9">
<p>form 9</p>

</div> <!-- form end -->

10-28-2010, 06:06 PM
Put them in a list and float the <li> left....similar to navigation tabs.