Fluid layout with an inputbox and button, how to solve it?

Question

I have a problem with a responsive design using the responsive formula for %. It workes great but not for a search bar, its just an inputbox and a button thats display: inline. It seems like there is an gap between them without me putting in any margin or padding, and that is why the formula dosen't work.. But thats my guess, can anyone tell me how to solve it? Now when I put the % in it scales, but after a while the button jumps down..

My HTML:

<div id="searchWrapper">

 <input type="search" id="inputSearch2">
 <button id="buttonSearch2">Sök</button>

</div>

My CSS:

#searchWrapper{
background-color: #854242;
width: 100%;
display: inline;
}

#inputSearch2, #buttonSearch2{
    margin-top: 10px;
    margin-bottom: 20px;
}

#inputSearch2{
    width: 52.08333333333333%; /* 500px / 960px */
    margin-left: 2.60416666666667%; /* 25px / 960px */
    margin-right: ;
}

#buttonSearch2{
    width: 41.66666666666667%; /* 400px / 960px */
    margin-right: 2.60416666666667%; /* 25px / 960px */
}

For the hole site i uploaded it here: http://jsfiddle.net/6Lbkg/

Answer 1

Im not 100% sure what your wanting. As for your button moving down.. If you apply a min-width: some%; or min-width: somepx; it wont move down on you when your scaling to a smaller resolution.

Answer 2

if you want your design to be responsive, you need to change all of your widths, margins, and paddings to EM or % (percent will be fine in this case). remember each element should have a total of width + padding + margin = 100%, and the 100% is 100% of the width of the parent element.