1

How would I make two drop down list sit next to each other. I have tried floating left.

here is my code: http://jsfiddle.net/bKwMt/

HTML

    <label for="numberRooms">
        NUMBER OF ROOMS <br>
        <select name="type" id ="numberRooms"> 
        <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>
        </select> 
    </label>
    <label for="numberBeds">
        NUMBER OF BEDS<br>
        <select name="type" id="numberBeds">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select><br>
    </label>

CSS

#numberRooms, #numberBeds{
float:left;


}

//UPDATE//

I have been trying to move the number of beds dropdown right to align with the end of the above drop down but nothing seems to be working :(. I am wondering if there is some padding that is stopping it maybe? I am not sure.

http://jsfiddle.net/bKwMt/6/

label[for=numberBeds] {
margin-left: 30px;
}

#numberBeds, #numberRooms {
width: 100px;
}
Birdlady9604
  • 207
  • 5
  • 18

3 Answers3

2

I'd suggest, since the select elements are contained in label elements, styling those rather than the select elements themselves:

label {
    display: inline-block;
}

JS Fiddle demo.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

Use a table and have each section in a cell, within the same row:

<table>
    <tr>
        <td>
<label for="numberRooms">
            ROOMS <br>
            <select name="type" id ="numberRooms"> 
            <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>
            </select> 
        </label>
            </td>
        <td>
        <label for="numberBeds">
            BEDS<br>
            <select name="type" id="numberBeds">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </select><br>
        </label>
            </td>
            </tr>
            </table>

JS Fiddle here

aaronegan
  • 64
  • 6
  • What is the benefit of using a table in this situation? It seems like extra unnecessary code? I am just learning so this would be good to know :) I have read posts debating about whether to use tables in forms. – Birdlady9604 Apr 14 '14 at 23:05
  • 1
    It depends on your overall page layout. As to whether a table or CSS styling would work best. But given the information I had, a table is a matter of a few extra tags to get you the results you wanted. I use tables all the time for formatting. – aaronegan Apr 14 '14 at 23:07
  • Ok so would it be ok to have a table for just these drop downs or should I put the whole form in a table? – Birdlady9604 Apr 14 '14 at 23:14
  • No. Learn to use CSS properly, using `table` elements for layout is unnecessarily complex and non-semantic, obfuscating and complicating your HTML to no benefit. For a relatively clear discussion: [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – David Thomas Apr 14 '14 at 23:16
  • @DavidThomas Time to markets beats ideological purity 9 times out of 10 ;-) – quant_dev Nov 21 '16 at 07:07
0

Fiddle

Make the labels display as inline-block and they will fit nicely together as if as they're in the same line of text.

label {
    display: inline-block;
}
assembly_wizard
  • 2,034
  • 1
  • 17
  • 10