making a search items at the same line with a pagination nav - html

Question

How can I make the following search bar and its button at left of a page and the pagination at right, at the same line, please ?
Here is the template that I'm working on : http://jsfiddle.net/ht97t/1/
<form role="search" method="get" action="/Accueil/Rechercher">
<div class="col-xs-8">
<input type="text" name="rech" class="form-control" placeholder="Rechercher">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button><br />
<label style="margin-left:20px;"><input type="radio" name="type" value="nomPoste" /> Nom du poste de travail</label><label style="margin-left:12px;"><input type="radio" name="type" value="nomAppMetier" checked /> Nom de l'application métier</label>
</form>
<ul class="pagination pagination-sm" style="float:right;">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
I've tried this, but, this haven't work : http://jsfiddle.net/ht97t/2/
Note : I'm using bootstrap.
Thanks a lot !

Answer 1

From the the bootstrap CSS;
.pagination {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0;
}
You will need to override that margin, for now just set an inline style on your UL to confirm;
<ul class="pagination pagination-sm" style="float:right; margin: 0!important;">
Edit
You should use the Bootstrap grid as documented (http://getbootstrap.com/css/), that is to define a row and then to specify the placement of content within that row by setting div classes.
For example if you wanted to have a search box top left and a pagination control top right of a row then try this:
<div class="row">
<div class="col-xs-8"><!--search here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>
If you want to leave some space between the left and right content then use the offset class:
<div class="row">
<div class="col-xs-6"><!--search here --></div>
<div class="col-xs-4 col-xs-offset-2"><!--pagination here --></div>
</div>
In your original example you had a Search Box left, Radio buttons middle and Pagination right, so you might just be best to go with a 4 4 4 grid:
<div class="row">
<div class="col-xs-4"><!--search here --></div>
<div class="col-xs-4"><!--radio buttons here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>

Answer 2

One possible solution for this is to make the .pagination absolute and move it accordingly.
Example Fiddle
CSS:
body {position: relative;}
.pagination {
position: absolute;
right: 0px;
top: 0px;
margin: 5px 0;
}
In this case I set the body to have position:relative; but you probably would want to switch that to the closest containing element.

Answer 3

You have several options to do this.
The quickest fix would be just to do a margin top of like 18px
<form role="search" method="get" action="/Accueil/Rechercher">
<span style="float:left; margin:18px 0 0 10px;">