Boostrap - What Should the Search Form Width Be? - html

Question

We need to achieve that the search form with search button fill the entire column area.
UPDATE:
I have a simplified version of code which can be viewed here: http://jsfiddle.net/persianturtle/Trgr6/10/
Another, previous jsFiddle version is here:
Here is the live example http://jsfiddle.net/Trgr6/3/
You will see black area as an example of the entire area to fill in the old version.
In the new version, I tried to set the width of the search form to the width of the:
.row-fluid .span9 { }
Class width, which is:
width: 74.46808510638297%;
And the code:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div id ="test" class="span9">
<form class="form-search">
<div class="input-append span12">
<input type="text" class= "search-query" placeholder="Enter Search">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>

Answer 1

Im not sure if I updated your Fiddle or not, but yeh. This will work.
http://jsfiddle.net/xWTuF/2/
Override the input append from inline-block to block and give it a padding-right equal to that of the overall button width and the padding on the input.
Give the input a width of 100%;
.container .form-search .input-append {
display:block;
padding-right:99px
}
.input-append input.search-query {
width:100%
}
Oh I also removed the span12, you dont need it. Reorganised the html to:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div class="span9">
<form class="form-search">
<div class="input-append">
<input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>