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.