CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2091061
user2091061

Reputation: 877

Align select tags horizontally

<div style="width:100%;" id="comboDiv">   
    <div style="width: 100px;">
        <select style="width: 100%;"/>
    </div>
    <div style="width: 200px;">
        <select style="width: 100%;" />
    </div>
    <input type="text" style="width: 10%; float:right;" />
</div>

I need to align these 3 items in a line but I am getting just one select tag and input box. I have tried applying float style to both the divs and various other css styles but I am unable to get 2 select tags in a row along with right aligned text box.

Upvotes: 0

Views: 65

Answers (6)

Manoj Raju CH
Manoj Raju CH

Reputation: 1

Just use table tag than you will get the exact output that you want.Here is the code for the same.

<div style="width:100%;" id="comboDiv">   
             <table>     
             <tr>
                  <td width="200px"> 
                      <div style="width: 100px; ">
                      <select style="width: 200px;" /> 
                      </div>
                   </td>
                   <td>
                    <div style="width: 200px; ">
                    <select style="width: 200px;margin_left:10em;" />
                    </div>
                   </td>
             </tr>
             </table> 
          <div>
               <input type="text" style="width: 100px; float:right;" />
          </div>

</div>

Upvotes: -1

Sidharth Gusain
Sidharth Gusain

Reputation: 1501

You haven't closed your <select></select> and use float:left to align both div horizontally. 

<div style="width:100%;" id="comboDiv">   
   <div style="width: 100px; float:left;">
       <select style="width: 100%;" >
         <option value="1">1</option>
         <option value="2">2</option>
       </select>
   </div>
   <div style="width: 200px; float:left;">
       <select style="width: 100%;" >
         <option value="1">1</option>
         <option value="2">2</option>
       </select>
   </div>

   <input type="text" style="width: 10%; float:right;" />
</div>

Update

Or you can use display:inline and remove the unnecessary div like this :

<div style="width:100%;" id="comboDiv"> 
   <select style="width: 100px; display:inline;" >
      <option value="1">1</option>
      <option value="2">2</option>
   </select>
  
   <select style="width: 200px; display:inline;" >
      <option value="1">1</option>
      <option value="2">2</option>
   </select>

   <input type="text" style="width: 10%; float:right;" />
</div>

Upvotes: 3

Kumar
Kumar

Reputation: 280

Try this

<div style="width:100%;" id="comboDiv">   
     <div style="width: 100px; display: inline-block">
      <select style="width: 100%;"></select>
     </div>
     <div style="width: 200px; display: inline-block">
            <select style="width: 100%;"></select>
     </div>
     <input type="text" style="width: 10%; float:right;" />
 </div>

Upvotes: 1

Mike Scotty
Mike Scotty

Reputation: 10782

Properly close your select tag and give the inner DIVs a display: inline-block; style.

#comboDiv > div {
  display: inline-block;
}
<div style="width:100%;" id="comboDiv">
  <div style="width: 100px; ">
    <select style="width: 100%;"></select>
  </div>
  <div  style="width: 200px; ">
    <select style="width: 100%;"></select>
  </div>

  <input type="text" style="width: 10%; float:right;" />
</div>

Upvotes: 2

jedifans
jedifans

Reputation: 2297

Try this. The default width is 100% and the default styling for a select or input is display: inline.

<div style="width:100%;" id="comboDiv">
    <select style="width: 100px;"></select>
    <select style="width: 200px;"></select>
    <input type="text" style="width: 10%;" /> 
 </div>

Consider not using px for sizing but instead a relative unit like em, which will scale correctly for the user's font size.

Upvotes: 0

Amit Kumar Pawar
Amit Kumar Pawar

Reputation: 3330

<div style="width:100%;" id="comboDiv">   
                    <div style="width: 100px;display: inline-block;">
                        <select style="width: 100%;display: inline;">
                        </select>
                    </div>
                    <div style="width: 10%;display: inline-block;">
                        <select style="width: 100%;">
                        </select>
                </div>

                <input type="text" style="width: 10%;float:right;display: inline;">
            </div>

close <select> using </select>

Upvotes: 0

Related Questions