CODEWITHSUNDEEP
htmlcssformsdrop-down-menu
Birdlady9604
Birdlady9604

Reputation: 207

drop down list sit next to each other

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;
}

Upvotes: 1

Views: 10329

Answers (3)

assembly_wizard
assembly_wizard

Reputation: 2064

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;
}

Upvotes: 0

aaronegan
aaronegan

Reputation: 64

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 2

Related Questions