Question

I am trying to place a search text box on the right hand side of the header and I can’t seem to figure out how to do it using Bootstrap 2.0.1.
The code I am trying is

<div class="page-header">
    <h1 class="span2">
        Parts
    </h1>
    <div class="span4">
        <div class="control-group">
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on">
                        <i class="icon-search"></i>
                    </span>
                    <input type="search" class="span3" placeholder="Search" name="search" id="search"/>
                </div>
            </div>
        </div>
    </div>
</div>

But it the search text box is not being pushed to the right with the spans and offsets and the line on the bottom of the header is not being pushed to the bottom of the tag. Any ideas?

Answer 1

Adding float: right to the first div tag nested within .page-header works for me. You also need to remember to clear your floats, this is the reason the line at bottom of the header is not being pushed to the bottom of the tag.

So adding the following CSS would resolve your problem:

.page-header {
    overflow: hidden;    /* clear floats */     
}

.page-header div {
    float: right;        /* float search content right */          
}

Working example: http://jsfiddle.net/7zds9/

Edit

For some reason, as pointed out by @PlTaylor, the input field wraps onto a new linein Chrome. This can be fixed using the following CSS:

.input-prepend input {
    float: left;
}

Working example: http://jsfiddle.net/7zds9/1/