L'elemento <form> va a capo perché è un elemento a livello di blocco. Dato che hai il <form> a destra, potresti dichiararlo flottante e quindi usare un tag vuoto per "ripulire" il float. Prendendo il tuo codice pari pari:
codice:
<div id="sito">
<div id="header">
<div id="logo" align="center"> [img]themes/TonyClub_Light_Pastel/images/logo.gif[/img]</div>
<div id="info_utente">
<span> $theuser </span>
<form name="DT" >
<input class="data_ora" type="text" name="MOSTRA" size="40">
</form>
<br class="clear" />
<script language="javascript" src="themes/TonyClub_Light_Pastel/style/date_time.js"></script>
</div>
</div>
</div>
/* CSS Document */
/* tag body: allineamento e sfondo */
body {
text-align:center; /* allineamento centrale, per IE */
background:#D6D6C6 url(images/linea.gif) repeat;
}
/* Pagina generale sito, centrata */
#sito {
width:70%;
text-align:left; /* riporta il testo a sinistra, per IE */
margin:auto auto; /* allineamento centrale, per FF */
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background:#FFECBF;
margin:0;
padding:0;
border:#000 1px solid;
}
/* inizio sezione Header */
#header {
width: 100%;
margin: 0;
padding: 0;
}
/* sezione Logo dentro header */
#logo { width: 100%; margin: 0; padding: 0; clear: both; }
/* sezione Info Utente e Data/Ora dentro header */
/* stampa info utente */
#info_utente {
width: 100%; margin: 0; padding-left: 0.2%; text-align:left;
color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-decoration:none;
}
form {
padding: 0;
margin: 0;
float: right;
}
.clear {
clear: right;
}
/* stampa data e ora */
input.data_ora {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-style:italic; color:#000; text-align:right;
border:#F00 solid 1px; padding-right:2px; padding-left:2px;
}
Attento solo a non impostare il margin-right all'elemento <form>, perché essendo flottante a destra, incorrerebbe nel bug dei margini raddoppiati in IE! Puoi comunque usare un padding-right se vuoi distanziarlo dal margine destro del <div> che lo contiene, oppure puoi impostare il margin-right insieme alla dichiarazione display: inline (che risolve misteriosamente il bug dei margini raddoppiati!).
Ah, ho visto che hai una dichiarazione con margin: auto auto. Sarebbe più corretto impostarla come margin: 0 auto, perché impostare i margini verticali sul valore auto non ha nessun significato (ce l'ha solo per quelli orizzontali, per ottenere appunto l'allineamento centrato dei box nei browser aderenti agli standard).
Inoltre hai il <div> che contiene le info utente e il <form> con impostata una larghezza e un padding sinistro...il che ti sballa il layout se guardi la pagina con IE 6 e con i browser aderenti agli standard. Ti conviene impostare il padding-left dell'elemento <span> anziché quello del <div> che lo contiene. 
)
Rispondi quotando
