unable to align the search bar on the right side of the page

Question

I want to align the search bar on the extreme right of the page. To do this,I wrote the following :

<form method="get" action="#">
    <input type="search" name="q" style="text-align:right" />
</form>

But it doesn't align the search bar on the right. Why is that ?

Answer 1

<form method="get" action="#" style="float:right">

Although, you should not use inline styling. Try to use external styling as much as possible.

What float does is move the affected element to one side of the screen. All the following elements will align themselves horizontally with the floated element.

Let's say we have 2 elements like this.

|| Element1 ||
|| Element2 ||

If I apply float:left on Element1, then the output will look like this.

|| Element1 | Element2 ||

If I apply float:right instead, then the output will be reversed.

|| Element2 | Element1 ||

In a nutshell, float does exactly what it says. It floats an element to the edge of the screen, and makes it the edge for the following elements.

PS : I wrote the edge of the screen for simplicity's sake. You can apply float in a hierarchical fashion as well. In that case, the edge of the parent element becomes the edge to align with.

Answer 2

text-align does just that, it aligns the text in an element to the right. In the case of an input box, it places the cursor to the right of the input field. You want to float the input box to the right, which places the input box to the far right of its parent element (in this case the form):

HTML

<form method="get" action="#">
    <input placeholder="Search" type="search" name="q" id="search-box" />
</form>

CSS

form{
    background-color: #000;
    overflow: auto;
    height: 50px;
    padding:5px 5px 0;
}
#search-box{
    float:right;
}

Here's the jsFiddle