I have included the following codes in my project: http://jsfiddle.net/VaKSG/
.brs_top_bar{
width: 900px;
height: 40px;
background: rgb(27, 124, 124);
border-bottom: 1px solid rgb(20, 92, 92);
color: white;
}
.brs_top_search{
width: 201px;
height: 40px;
background: rgb(22, 105, 105);
display: inline-block;
}
.brs_top_show_hide{
height: 40px;
width: 10px;
background: rgb(78, 218, 218);
display: inline-block;
}
.brs_top_pages_info{
color: white;
font-weight: bold;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
.brs_top_pages_but{
text-decoration: none;
color: white;
font-weight: bold;
line-height: 28px;
text-align: center;
height: 28px;
width: 28px;
background: rgb(35, 156, 156);
border: 1px solid rgb(31, 139, 139);
display: inline-block;
}
.brs_top_pages{
margin: 5px;
height: 30px;
display: inline-block;
vertical-align: top;
}
.floating{
float: right;
position: relative;
}
<div class="brs_top_bar">
<div class="brs_top_search"></div>
<div class="brs_top_show_hide"></div>
<div class="brs_top_pages floating">
<div class="brs_top_pages_info">1 - 10 of 300</div>
<a href="" title="" class="brs_top_pages_but"><</a><a href="" class="brs_top_pages_but" title="">></a>
</div>
</div>
While it works fine in the provided link, I am facing an issue with the floated element overlapping other elements in my local environment as shown in the attached image:
Despite trying various solutions, I have been unable to resolve this issue. I am using Google Chrome for testing.