Failed to align the search bar on the right side of the page
<form method="get" action="#" style="float:right">
You shouldn't use inline style though. Try to use external style whenever possible.
What it float
does is move the affected item to one side of the screen. All of the following elements are horizontally aligned with the floating element.
Let's say we have 2 items.
|| Element1 ||
|| Element2 ||
If I applied float:left
in Element1
, then the result will look like this.
|| Element1 | Element2 ||
If applied instead float:right
, then the exit will be canceled.
|| Element2 | Element1 ||
In short, float
it does exactly what it says. It floats the element to the edge of the screen and makes it the edge for the next elements.
PS: I just wrote the edge of the screen for simplicity. You can apply float
in a hierarchical manner. In this case, the edge of the parent element becomes the edge to align with.
source to share
text-align
does exactly that, it aligns the text in the element to the right. In the case of an input box, it places the cursor to the right of the input field. You want float
an input field to the right that puts the input field to the far right of its parent (in this case, it's a 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
source to share