Problemi di sovrapposizione div

[AndreaBa]

Salve a tutti!
Arriverò dritto al sodo.
Ho recentemente cercato di creare un sito web nella quale ho inserire 2 div affiancati orizzontalmente con le stringhe:
div 1 float: left;
div 2 float: right;
e sotto: <hr></hr> per fare una linea di spaziatura.
Per le larghezze dei div ho usato le percentuali, div 1 width: 50% e div 2 width: 45% e fino a qui sembrerebbe andare tutto bene...
Anche quando ridimensiono la pagina la posizione dei div non cambia.
Il problema arriva quando ho inserito un terzo div sotto ad entrambi.
La struttura è questa:
<div class="1"></div>
<div class="2"></div>
<hr></hr>
<div class="3"></div>
Ora, con l'aggiunta del terzo div con: width: 100% ogni volta che ridimensiono la pagina mi "sballa" tutto. Il terzo div va a finire con la sua altezza sotto agli altri due sopra mantenendo però la sua posizione nella pagina e non ne capisco il motivo. E' come se prendesse i due div sovrastanti come se fossero al suo interno.
Spero possiate aiutarmi a risolvere
Se non mi sono spiegato bene, se volete posso scrivervi anche il codice css.

[KillerWorm]

Ciao, il problema che descrivi sembra dipendere dal float. Puoi risolvere applicando opportunamente la proprietà clear:both ad un elemento successivo (in questo caso può essere l'elemento <hr>).

Per maggiori informazioni ti rimando a qualche guida:
http://www.html.it/pag/42450/float-e-clear/
http://www.html.it/articoli/float-teoria-e-pratica-5/

Tra i link utili al capitolo 2 puoi trovare altri riferimenti relativi a Float e Clear.



A parte questo, i codici che hai indicato hanno qualche errore:

- L'elemento hr è un tag vuoto e non va indicato il tag di chiusura.
Questo è sbagliato:

<hr></hr>

La giusta sintassi è questa: <hr> in HTML oppure <hr/> in XHTML.

- I nomi di classe non possono iniziare con valori numerici.
Questo è sbagliato:

class="1"
class="2"
class="3"

Un nome di classe o di id può iniziare con una lettera o con undescore.
Esempio:

class="_1"
class="a2"
class="a_3"