Ho una semplice pagina con due elementi che vorrei fossero posizionati uno di fianco a l'altro. Nonostante il codice mi sembri concettualmente esatto, la pagina viene renderizzata in malo modo, col secondo elemento (quello celeste) posizionato una riga sotto il primo

ecco l'immagine


Questo il codice

Codice PHP:

<style type="text/css">



form 
{
    
    background-color:#996600;
    width:30%;

    float:left;       
    font:"Arial Black", Gadget, sans-serif;
    color:#FFF
}

#risultati 
{
    width:70%;
    background-color:#0099FF;
    font:"Arial Black", Gadget, sans-serif;
    color:#FFF;
    float:left;      

}


    

</style>

</head>

<body>



<form action"">
 <label>Inserisci ragione sociale</label>
   <input name="chiave" onkeyup="showHint(this.value)"/>
 
 
</form>

<p id="risultati">Risultati: <span id="txtHint"></span></p> 

Altra cosa: se tolgo il float dal secondo elemento, l'allineamento verticale si corregge, tuttavia sorge un altro problema, ovvero, che il background del secondo elemento (quello celeste) anziché iniziare dove finisce il primo elemento, inizia dalla sinistra estrema del browser (occupata dall'elemento marrone) e viene quindi coperto dal primo elemento. Stranamente la scritta "risultati" risulta posizionata correttamente, il problema affligge solo il background