problema posizionamento di 3 div

[mfgmdl]

Scusate l'ignoranza non capisco perchè, se guardate questa pagina (http://www.deleonardis.info/design/objects/) e la analizzate con firebug onde evitare di dover riportare tutto il codice, il div "top-2" ingloba i div "left-1" e right-1" e analogamente il div "top-3" ingloba "left-2" e "right-2" e cosi via con i seguenti.
Io vorrei semplicemente che i tre div "top-1","left-1" e "right-1" siano posti uno sotto l'altro e punto.
Sono riuscito a collocare "left-1" e "right-1" sotto "top-1" usando la proprietà float:left, ma non capisco perche poi "top-2" inizia dove termina "top-1" e non dove termina "right-1" essendo che nel codice l'ho scritto dopo.... scusate sono una capra, ma se mi aiutate sapro evolvermi.
I tre div dovrebbero susseguirsi collocandosi uno sotto l'altro, o sbaglio. Eppure il quarto si magna gli ultimi due...

Grazie

[Prill]

Non mi è chiarissimo, ma quando affianchi degli elementi con il float e vuoi poi che gli elementi successivi non ne siano coinvolti è necessario interrompere il float stesso usando la proprietà clear.

[mfgmdl]

Grazie della risposta.

Nella pagina in questione ho gia risolto utilizzando la proprietà padding (invece di margin) per, ad esempio, collocare top-2 a debita distanza da left-1 e right-1.
Non ci riuscivo usando margin perche il distanziamento non avveniva dai due div superiori (appunto left-1 e right-1, ai quali esra stata data la proprieta float left affinche si affiancassero l'uno all'altro), bensi da top-1 (e solo quando il valore di margin arrivava a coprire l'altezza di left-1 e right-1).
Se su firebug fossi cosi gentile da fare una prova e annullare la proprieta padding per il div top-2 e applicarne una margin: NNpx 0 0 ti renderesti conto di cosa sto parlando.

Il problema è risolto per le mie esigenze, ma ovviamente mi piacerebbe capire!

Grazie ancora