html issue ,a div positioning problem - css

Question

I have implemented a facebook style search suggestion feature for my application . But , I am facing some issues here .
i) Below is the search box and the result div code :
<div align="right" style=" width:300px; float:right; margin-right:30px">
<input type="text" id="searchbox" class="searchbox" maxlength="100" style="color: rgb(170, 170, 170);"> <img src="../../../asset/images/search.png" style="margin:0 0 -5px 2px"><br><br>
<input type="hidden" value="http://www.plus-one-me.com/search/google/interests" id="formurl" name="formUrl">
<div id="display">
</div>
</div>
The search results get displayed within the #display div as below:
<div id="display" style="display: block;">
<div class="display_box" align="left"> Cakephp </div>
<div class="display_box" align="left"> Myspace </div>
<div class="display_box" align="left"> Php </div>
</div>
This is how the page looks before we enter anything in the search area :
Below is what the search results div is doing :
Basically , it brings down the menu in my main content area . So how can I fix this using CSS ?
Below are the styles :
of the menu div in the background (containing the options Home,History and Settings
.menuBar .submenu {
padding:4px 12px 5px 12px;
margin-right:8px;
border:2px solid #EEE;
text-decoration:none;
display:inline-block;
float:left;
font-size:13px;
-moz-border-radius:40px;
border-radius:40px;
-webkit-border-radius:40px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
color:#333;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#765), to(#FFF));
background: -webkit-linear-gradient(#000, #FFF 70%);
background: -moz-linear-gradient(#BBB, #FFF 100%);
background: -ms-linear-gradient(#765, #FFF 70%);
background: -o-linear-gradient(#765, #FFF 1000%);
background: linear-gradient(#765, #FFF 70%);
-pie-background: linear-gradient(#765, #FFF 70%);
}
of my searchbox :
#searchbox {
border: 1px solid #000000;
padding: 3px;
width: 250px;
}
and the display_box for individual results :
.display_box {
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}

Answer 1

the drop down menu has to have position:absolute applied to it. This takes it out of the flow of the page so it doesn't affect other elements.

Answer 2

As #Galen suggested, try css:
#display {
position: absolute;
}
You might want to instead have the html thats outputed be something more like
<ul id="display">
<li>result</li>
<li>result</li>
<li>result</li>
</ul>
Which if you did, you would have css along the lines of
#display {
position: absolute;
list-style-type: none; list-style: none;
margin: 0; padding: 0;
}
#display li {
display: block;
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}