CSS placing a div beside a div

Question

I was wondering why my div isn't next to the other div? It isn't placing it next to each other but below each other, i don't know why it is doing that.

.form-search #search {
    width: 485px;
}


.form-search #search #baaninput input {
    width: 240px;
    height: 123px;
    background-color: blue;
    float: left;
 
}

.form-search #search #plaatsinput input {
    width: 240px;
    height: 123px;
    background-color: green;
    float: right;
}


.form-search input {
    margin-top: -15px;
    margin-left: -15px;
    padding: 0px 5px;
    float: left;
    font: bold 15px "lucida sans","trebuchet MS","Tahoma";
    border: 0px none;
    background: none repeat scroll 0% 0% rgba(0,0,0,0);
}

.form-search button:before {
    content: "";
    position: absolute;
    border-width: 8px 8px 8px 0px;
    border-style: solid solid solid none;
    border-color: transparent #D83C3C;
    top: 18px;
    left: -6px;
}

.form-search button {
    left: 140px;
    margin-top: -40px;
    overflow: visible;
    position: relative;
    float: right;
    border: 0px none;
    padding: 0px ;
    cursor: pointer;
    height: 50p`x;
    width: 110px;
    font: bold 15px/40px "lucida sans","trebuchet MS","Tahoma";
    color: #FFF;
    text-transform: uppercase;
    background: none repeat scroll 0% 0% #D83C3C;
    border-radius: 0px 3px 3px 0px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}

<form class="form-search">
                            <div id="search">
                            <div id="baaninput">
                                <fieldset>
                                    <input type="text" required="" placeholder="Baan naam hier...">
                                    </input>
                                </fieldset>
                            </div>

                            <div id="plaatsinput">
                                <fieldset>
                                    <input type="text" required="" placeholder="Plaats naam hier..."></input>
                                 </fieldset>
                            </div>

                            <button type="submit">
                                Zoeken
                            </button>
                             </div>



                        </form>

It should work? I dont know why

Thanks for your time looking at my code

Regards, Johan

Answer 1

Please two points:

1. fieldset default style.
2. HTML structure.

I make my JSFiddle.
The main problem is the fieldset.I wonder if the tag <fidleset> is your need or not. I change your DOM and modify CSS. Because fieldset have a default style. It is not fit for you.

Answer 2

Your fieldset has a padding of 10px (10 left and 10 right), a margin of 2px (2 left and 2 right) and a border of 2px (2 left and 2 right). Your input had a width of 240 + your padding, margin and border gives you a width of 270px.

2 field sets of 270px gives you 540px in total. Give your .form-search #search a width of 540px instead of 485px and they will float next to each other.

Answer 3

Add following css in your code

#baaninput,#plaatsinput
{
width: 50%;
float:left;
}