CSS Button is below where it should be -

CSS Button is below where it should be -

i have never created search bar such one, i'm trying create search bar, button touching input box. have achieved this, button lower should be, , i'm not sure why.

above looks like. can see, button lower should be.

here css:

.searchbox { margin-top: 10px; width: auto; height: auto; float: left; margin-left: 35px; } .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } .form-wrapper input { width: 285px; height: 30px; padding: 10px 6px; border-radius: 3px 0 0 3px; background-color: #ededed; border: 1px solid #d9d9d9; color:#363636; } .form-wrapper input:focus { outline: 0; background: #e8e8e8; } .form-wrapper button { overflow: visible; position: relative; float: right; border: 0; cursor: pointer; height: 30px; width: 45px; color: #fff; background: #48a6d9; border-radius: 0 3px 3px 0; } .form-wrapper button:hover{ background: #4dafe3; border: 0; } .form-wrapper button:active { border: 0; }

and here how utilize button:

<div class="searchbox"> <form class="form-wrapper cf" action="" method="post"> <input type="text" name="username" placeholder="search user..." required> <button type="submit">go!</button> </form> </div>

how can prepare button should be? (beside input area)

thanks!

you need give float:left both (input , button)

i have created jsfiddle help you

css