[CSS] - "float" non funziona

[dementialsite]

Provate a dare un'occhiata a questa pagina: http://theboard.dementialsite.alterv...thread.php?t=1

Su una cosa IE, Firefox e Opera sono perfettamente d'accordo: lo stile è reso da c*** in tutti e tre i browser... quello che vorrei sapere è perché, visto che il codice mi sembra che sia generato correttamente (ne riporto qui un esempio):

<DIV CLASS="user_header">
   <DIV CLASS="message_data">
      <P><B>Messaggio #1</B><BR>
      Inviato: 20051204162601</P>
   </DIV>
   <DIV CLASS="user_data">
      <H3>TheMaster</H3>
      <P><B>Amministratore</B><BR>
      THE BO4RD Registered User #1<BR>
      Data registrazione: 2005-12-04<BR>
      Messaggi: 2</P>
   </DIV>
</DIV>
<DIV STYLE="border:solid 1px #000000">
   <DL>
      <DT>Welcome on Board</DT>
      <DD>Messaggio di prova generato da TheMaster</DD>
   </DL>
</DIV>

Questi invece sono i tre stili CSS coinvolti:

DIV.user_header { background-color:#99FF99; color:#000000; border:solid 1px #000000; overflow:visible }
DIV.user_header DIV.user_data { float:left; width:35%; margin:0; font-size:85%; border:solid 1px #FF0000 }
DIV.user_header DIV.message_data { text-align:right; float:right; width:35%; margin:0; font-size:85%; border:solid 1px #FF0000 }

Forse avrete capito che i DIV a cui ho messo in via provvisoria i bordi rossi dovrebbero finire dentro quello verde, cosa che invece non succede...

Qualcuno ha qualche idea di come posso risolvere il problema?

Grazie a chi risponde... statemi bene...

puoi usare un div invisibile che esegua un clear dei contenuti, separando i due div col float, da quello contenente il messaggio
forse col codice mi spiego meglio

<div class="user_header">
 <div class="message_data">
  <p><b>Messaggio #1</b><br>Inviato: 20051204162601</p>
 </div>
 <div class="user_data">
  <h3>TheMaster</h3><p><b>Amministratore</b><br>THE BO4RD Registered User #1<br>Data registrazione: 2005-12-04<br>Messaggi: 2</p>
 </div>
 <div style="clear:both"></div>
</div>

la definizione che ho scritto è inline, ma puoi tranquillamente metterla nel css esterno e richiamarla

mavericck

[dementialsite]

Ho seguito il tuo consiglio, ma adesso ho un altro problema: se aggiungo questo stile (la classe close_header è ovviamente quella del DIV vuoto)

DIV.user_header DIV.close_header { clear:both; margin:0; padding:0; height:0; border:solid 1px #FF0000 }

quello che ottengo è che il DIV del primo messaggio finisce per allungarsi finché non supera le pubblicità sulla sinistra (potete vederlo sul link più sopra)...

Non c'è un modo per risolvere il problema? Statemi bene...

EDIT: scambiando i posizione i due DIV e specificando clear:right sul terzo ho in parte risolto il problema... solo che adesso non mi spiego come mai siano sballate le dimensioni dei contenitori (Explorer fa giuste la larghezze, ma lascia un "buco" al posto del terzo DIV nonostante height:0; margin:0; padding:0; overflow:hidden, Firefox e Opera il buco invece lo lasciano tra i due DIV sopra...)

Dunque, rispondo un po' qui un po' là.

Per forzare dei div a stare dentro dei div dove non vogliono stare, non occorre un quarto div! Il modo standard per far stare i due div dentro il terzo è che il contenitore abbia

overflow:auto;
width:taldeitali;

oppure

float:left;
width:taldeitali;

Non importa quale dei due, basta che specifichi le dimensioni.

Secondo: un div vuoto?!?!?! E che te ne fai?

Terzo: per posizionare le sezioni, tu fai qualcosa di scorretto:

DIV#header { width:auto }
DIV#menu { float:left; width:20% }
DIV#main { margin-left:20%; width:auto }
DIV#banner { margin-left:20%; width:auto }
DIV#footer { clear:both; width:auto }

Tu stai sovrapponendo il main al menu, tecnicamente, sfruttando la trasparenza dei margini! Sarebbe più corretto e reso meglio da tutti i browser che tu non li sovrapponessi. Fai così:

DIV#header { width:auto }
DIV#menu { float:left; margin:0; padding:0; width:19% }
DIV#main { float:left; margin:0;padding:0; width:80%; margin-right:-1px; }
DIV#footer { clear:both; width:auto }

e così via. In questo modo, avrai veramente menu e main affiancati, e non sovrapposti.
Noterai che la larghezza totale è 99%: questo va fatto perché i broswer spesso fanno errori di arrotondamento, e 100% lo mettono a 101%, sballando fuori. margin-right:-1px serve a riportare dentro una eventuale fuoriuscita.