css align ul to form - html

Question

Hi I'm doing a live search with ajax. I want to align the form and the ul.
here my form
<div align="right">
<form method="post" action="" id="search" class="kb-search">
<input type="text" id="kbsearch" name="kbsearch" placeholder="Knowledge Base" autocomplete="off">
<input type="hidden" name="action" value="searchKB"/>
</form>
<ul id="results"></ul>
</div>
and here my css
.kb-search {
width: 250px;
}
#results {
text-align:left;
width: 250px;
background: #ffffff;
padding: 5px 10px;
max-height: 400px;
overflow: auto;
position: absolute;
z-index: 99;
border: 1px solid #A9A9A9;
border-width: 0 1px 1px 1px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
How can I do this:

Answer 1

You can set the parent div position to relative.. then to the #results add right: 0.. I think this will do..

Answer 2

Define your parent div position:relative;
#results{
top: 8px;
left: 2px;
}
Demo

Answer 3

You parent div needs to have position: relative so that you can position elements inside relevant to it. So
<div align="right" style="position: relative;">
Then
#results {
position: absolute;
left: 0;
top: 25px; /* e.g Offset it by the height of the input field */
...
}

Answer 4

The best and most reusable way to do this is:
div {
position: relative;
}
#results {
position: absolute;
top: 100%;
right: 0;
}
By setting the results to top: 100% ensures that the results will always sit underneath the search box regardless of the height of it.
This is by far the better way, as putting a specific pixel value for top is quite brittle and unresuable.
Fiddle

Answer 5

maybe this is your Answer:
<style>
#kbsearch {
width: 250px;
}
#results{
text-align:left;
width: 234px;
background: #ffffff;
padding: 5px 10px;
max-height: 400px;
overflow: auto;
margin-top:-5px;
z-index: 99;
border: 1px solid #A9A9A9;
border-width: 0 1px 1px 1px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
</style>
and put this in body or other place what you like:
<div>
<form method="post" action="" id="search" class="kb-search">
<input type="text" id="kbsearch" name="kbsearch" placeholder="Knowledge Base" autocomplete="off">
<input type="hidden" name="action" value="searchKB"/>
</form>
<ul id="results">f</ul>
</div>