html problème, un problème de positionnement div

Question

J'ai mis en place une fonctionnalité de suggestion de recherche de style facebook pour mon application. Mais, je suis confronté à quelques problèmes ici.

i) est inférieur à la zone de recherche et le code div résultat:

<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);">&nbsp; &nbsp;<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> 

Les résultats de recherche ne sera pas affiché dans le #display div comme ci-dessous:

<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> 

Voici comment la page regarde avant que nous entrons quelque chose dans la zone de recherche:

Ci-dessous ce que le Résultats de la recherche div fait:

Fondamentalement, il fait baisser le menu dans ma zone de contenu principal. Alors, comment puis-je résoudre ce problème en utilisant CSS?

Voici les styles:

du div menu en arrière-plan (contenant les options Accueil, Histoire et Paramètres

.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%); 
} 

de ma recherche:

#searchbox { 
border: 1px solid #000000; 
padding: 3px; 
width: 250px; 
} 

et le dis play_box pour les résultats individuels:

.display_box { 
border-top: 1px solid #DEDEDE; 
font-size: 12px; 
height: 30px; 
padding: 4px; 
} 

Answer 1

le menu déroulant doit avoir position:absolute appliqué. Cela le sort du flux de la page afin qu'il n'affecte pas les autres éléments.

Answer 2

Comme @Galen suggéré, essayez css:

#display { 
position: absolute; 
} 

Vous voudrez peut-être avoir lieu thats html outputed être quelque chose comme

<ul id="display"> 
    <li>result</li> 
    <li>result</li> 
    <li>result</li> 
</ul> 

qui, si vous l'avez fait, vous auriez css le long les lignes de

#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; 
}