css for search button and text box

Question

I want to display search button and text box in same line but I have problem that search button is displaying slight below from textbox.I attched my code in snippet please run It in full screen It will help you to understand my problem

 .outer { margin-left: 20%; margin-top: 1%; margin-bottom: 3%; height: 737px; width: 60%; box-shadow: 10px 10px 5px #888888; border: 1px solid #f9f2f2; border-radius: 10px; } button.logout{ display:inline; float:right; margin-right:10px; margin-left: 5px; } .lout{ float: right; display: inline-block; margin-top:20px; } .log { width:60%; height: 10%; position:absolute; border: 1px solid #f9f2f2; border-radius: 10px; background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(top, #e5e3e3, ffffff); background-color: #e5e3e3; border: 0px solid #f9f2f2; text-align: center; line-height:20px; border-width: 0px 0px 1px 1px; display:inline-block; } .rest { padding:7%; height: 580px; background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(top, #e5e3e3, ffffff); background-color: #e5e3e3; border: 1px solid #f9f2f2; border-width: 0px 0px 0px 0px; border-radius: 0px 0px 10px 10px; padding: 10% 7px; } .sidemenu { float: left; margin-top: 140px; width: 100%; } .content { } .side{ width: 24%; float: left; display: inline-block; } form[name=profile] p { padding-left: 20%; } hr { margin: 0; width: 1px; height: 658px; border: 0; background: #fff; float: left; } .astext { background:none; border:none; margin:0; padding:0; cursor:pointer; color:#000000; line-height:35px; font-family:arial; font-size:13px; font-weight:bold; } a.astext:link,a.astext:visited { color:black; background-color:transparent; text-decoration:none; } a.astext:hover,a.astext:active { color:black; background-color:transparent; text-decoration:none; } .menu{ height: 45px; text-align:left; margin-left:2px; background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(top, #e5e3e3, ffffff); background-color: #e5e3e3; border: 1px solid #f9f2f2; border-width: 0px 0px 0px 0px; border-radius: 0px 0px 10px 10px; text-align: left; padding: 0px 7px; } .menu:hover{ background: -o-linear-gradient(top, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center bottom, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(bottom, #e5e3e3, ffffff); background-color: #e5e3e3; border: 1px solid #f9f2f2; border-width: 0px 0px 0px 0px; border-radius: 0px 0px 10px 10px; text-align: left; padding: 0px 7px; } input[type=text],textarea{ float:right; margin-right:20%; } .search{ display:inline; float:right; margin-right:5px; margin-bottom:5px; } .add{ display:inline; float:right; margin-top:5px; margin-right:4px; margin-left: 5px; } input[type='text'] { display: inline-block; float: left; margin-left:29%; } ps{ margin-left: 350px; } .sxt{ float: right; } h3{ text-align:center; } h1{ float:left; margin-left: 28%; } 

  <div class="outer"> <div class="log"> <!--<h1>Profile</h1> --> <form method="post" class="lout" ><button class="logout" name="logout" >Logout</button> </div> <!--End of log div --> <div class="rest"> <div class="side"> <div class="sidemenu"> <div class="1 menu"> <a href="admin_dashboard.php" class="astext">Profile</a> </div> <!--End of menu1 --> <div class="2 menu"> <a href="clients.php" class="astext">Clients</a> </div> <!--End of menu 2--> <div class="3 menu"> <a href="employees.php" class="astext">Employees</a> </div> <!--End of menu 3--> <div class="menu 4"> <a href="admin_file_view.php" class="astext">Documents</a> </div> <!--End of menu 4--> </div> <!--End of side menu --> </div> <!--End of side div --> <hr> <!-- <div class="heading" > <h1>Profile</h1> </div> End of heading div --> <div class="content"> <form method="post" name="profile" id="profile"> <h1>Clients List</h1><a href="client_new.php"><button name="add" style="align:right;" class="add">Add</button></a> <br><br><br> <p style="align:right;" class="s"> <input class="stxt" type="text" size=20 name="searchtxt"> <button name="search" class="search">Search</button></p> </div> <!--End of content --> </div> <!--End of rest div --> </div> <!--End of outer div--> 

Answer 1

change these codes in your css:

input[type='text'] {
  display: inline-block;
  float: left;
  margin-right: 0;
  /* margin-left: 29%; remove this line*/ 
}
p.s {
  margin-left: 50px;
  width: 280px;
}
.search {
  display: inline-block;
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}

this is the fiddle : http://jsfiddle.net/ub8888sd/1/

or even change <p class="s"></p> to a div:

<div class="s"></div>

and in css:

div.s {
      margin:0 auto;
      width: 215px;
    }

http://jsfiddle.net/ub8888sd/5/