Arranging Elements in HTML and using Javascript -


i quite new javascript. have been making forms here website , have unusual problem.

i want elements names, male/female, dob side side..!! when float them side side ,give width them, doesn't seem change it..!! tried searching on google , stackoverflow, isnt working here.

let me paste html , css code below people can me out..!!

html code :

    <div id="form_container" class="warpshadow wlarge wnormal">          <img src = "header.png" width="100%" />         <form id="form_3" class="appnitro top_label"  method="post" data-highlightcolor="#f5d678" action="#main_body">                     <div class="form_description">             <h2>swim team registration fees</h2>             <p>(one check can written children including required fees junior memberships.)</p>         </div>                                     <ul >                         <li id="pagination_header" class="li_pagination">              <table class="ap_table_pagination" width="100%" border="0" cellspacing="0" cellpadding="0">               <tr>                    <td align="center"><span id="page_num_1" class="ap_tp_num ap_tp_num_active">1</span><span id="page_title_1" class="ap_tp_text ap_tp_text_active">fees</span></td><td align="center" class="ap_tp_arrow">&gt;</td> <td align="center"><span id="page_num_2" class="ap_tp_num">2</span><span id="page_title_2" class="ap_tp_text">registration</span></td><td align="center" class="ap_tp_arrow">&gt;</td> <td align="center"><span id="page_num_3" class="ap_tp_num">3</span><span id="page_title_3" class="ap_tp_text">release</span></td><td align="center" class="ap_tp_arrow">&gt;</td><td align="center"><span id="page_num_4" class="ap_tp_num">4</span><span id="page_title_4" class="ap_tp_text">payment</span></td>               </tr>             </table>         <li id="li_2" >         <label class="description" for="element_2"><input type="checkbox"> $120 1st child </label>         </li>                 <li id="li_3" >         <label class="description" for="element_2"><input type="checkbox"> $110 2nd child </label>         </li>             <div id="moveleft">             <li id="li_4" >         <label class="description4" for="element_2">names </label>         <input id="element_2" name="element_2" class="element text small" type="text" maxlength="255" value="">         </li>         <li id="li_5">             <div>                 <label class="description5" for="element_5">male / female</label>                 <select class="element select small" id="element_5" name="element_5">                  <option value="" selected="selected"></option>                 <option value="male">male</option>                 <option value="female">female</option>                 </select>             </div>          </li>         <li id="li_8" class="date_field">         <label class="description">dob </label>         <span class="date_mm">             <input id="element_8_1" name="element_8_1" class="element text" size="2" maxlength="2" value="" type="text" /> /             <label for="element_8_1">mm</label>         </span>         <span class="date_dd">             <input id="element_8_2" name="element_8_2" class="element text" size="2" maxlength="2" value="" type="text" /> /             <label for="element_8_2">dd</label>         </span>         <span class="date_yyyy">              <input id="element_8_3" name="element_8_3" class="element text" size="4" maxlength="4" value="" type="text" />             <label for="element_8_3">yyyy</label>         </span>             </div>          </li>  

i cannot attach css code here page becoming large..!! have made file can download here :css file or open in new tab , whole file viewable..!!

please me thing..!!!

you can find working example here :

http://www.ankitsuryawanshi.in/projects/form/form1/form.html

thank time , answers..!!

this might looking split form 2 columns:

<li> <div class="left"><label class="description4" for="element_2">names </label></div> <div class="right"><input id="element_2" name="element_2" class="element text small" type="text" maxlength="255" value=""></div> </li> 

the main elements <div class="left"> , <div class="right">

in css file put

.left{float:left;} .right{float:right;} 

play around bit.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -