How to make my search bar pull-right? - css

Question

I've implemented a search bar on my Rails app but it will not pull right for the life of me. With the method I've used, there's a form_tag that seems to overlay the top navbar.
The code for the search bar looks like this:
<%= form_tag search_path, :method => 'get', :class => "form-search", :style => "height:24px;" do %>
<div class="input-append" style="padding-top:5px;">
<%= text_field_tag :search, params[:search], :class=>"span3 watermark search-query", :placeholder => "Search By Device or PIN"%>
<button class="btn" type="submit"><i class="icon-search"></i></button>
</div>
<% end %>
The navbar looks like:
Adding pull-right as a style in any of the tags is not working. Has anyone experienced this problem before?
The Bootstrap CSS override code:
#Wrapper {
margin: 0 auto;
width: 900px;
}
.navbar-fixed-top {
padding-bottom:0px !important;
height:42px;
}
.navbar-inner {
background-color: hsl(27, 94%, 39%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c05a05", endColorstr="#c05a05");
background-image: -khtml-gradient(linear, left top, left bottom, from(#c05a05), to(#c05a05));
background-image: -moz-linear-gradient(top, #c05a05, #c05a05);
background-image: -ms-linear-gradient(top, #c05a05, #c05a05);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c05a05), color-stop(100%, #c05a05));
background-image: -webkit-linear-gradient(top, #c05a05, #c05a05);
background-image: -o-linear-gradient(top, #c05a05, #c05a05);
background-image: linear-gradient(#c05a05, #c05a05);
border-color: #c05a05 #c05a05 hsl(27, 94%, 39%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
-webkit-font-smoothing: antialiased;
.border-radius(0) !important;
}
.navbar .brand {
display: block;
float: left;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0 #;
}
.navbar .nav > li > a {
color: white;
float: none;
padding: 10px 15px;
text-decoration: none;
text-shadow: 0 0px 0 #ffffff;
}
.navbar .nav > li > a:focus
.navbar .nav > li > a:hover {
color: orange;
text-decoration: none;
background-color: transparent;
}
.container {
max-width:900px;
}
.row-fluid {
max-width:900px;
}
.span3 {
max-width:210px;
}
.well {
background-color: hsl(33, 100%, 93%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffeedb", endColorstr="#ffeedb");
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffeedb), to(#ffeedb));
background-image: -moz-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -ms-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffeedb), color-stop(100%, #ffeedb));
background-image: -webkit-linear-gradient(top, #ffeedb, #ffeedb);
background-image: -o-linear-gradient(top, #ffeedb, #ffeedb);
background-image: linear-gradient(#ffeedb, #ffeedb);
border-color: #ffeedb #ffeedb hsl(33, 100%, 93%);
color: #333 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
-webkit-font-smoothing: antialiased;
}
.well-thumbnail {
background-color: white;
border-radius: 5px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
}
.row-padded {
padding-top: 10px;
background-color: #B8B8B8;
border: 5px solid #DDD;
margin-top: 10px;
}
.btn-danger {
}
.btn-custom-danger {
background-color: hsl(0, 69%, 22%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b42121", endColorstr="#5e1111");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b42121), to(#5e1111));
background-image: -moz-linear-gradient(top, #b42121, #5e1111);
background-image: -ms-linear-gradient(top, #b42121, #5e1111);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b42121), color-stop(100%, #5e1111));
background-image: -webkit-linear-gradient(top, #b42121, #5e1111);
background-image: -o-linear-gradient(top, #b42121, #5e1111);
background-image: linear-gradient(#b42121, #5e1111);
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}
.btn-custom-primary {
background-color: hsl(193, 32%, 49%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8d3da", endColorstr="#5493a4");
background-image: -khtml-gradient(linear, left top, left bottom, from(#b8d3da), to(#5493a4));
background-image: -moz-linear-gradient(top, #b8d3da, #5493a4);
background-image: -ms-linear-gradient(top, #b8d3da, #5493a4);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8d3da), color-stop(100%, #5493a4));
background-image: -webkit-linear-gradient(top, #b8d3da, #5493a4);
background-image: -o-linear-gradient(top, #b8d3da, #5493a4);
background-image: linear-gradient(#b8d3da, #5493a4);
border-color: #5493a4 #5493a4 hsl(193, 32%, 41.5%);
color: #333 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.49);
-webkit-font-smoothing: antialiased;
}
#thumbnail-font{
font-size:small;
}
Thank you.

Answer 1

Try using float:right to sent .form-search to the right of the header.
.form-search {
float:right;
}