OK, adesso e` piu` chiaro.

Il blocco "laterale" (rosso) e` alto il 100% del body, che a sua volta e` alto come la finestra. In piu` il blocco ha un bordo di 4px totali (2 sopra e 2 sotto), il che` porta ad una altezza (fino ad adesso) di 100% + 4px.
Pero` il blocco stesso e` posizionato DOPO il "superiore", con un margine negativo di 100px (vuol dire che si sovrappone al superiore).
Il blocco "superiore" e` alto 155px (compreso il bordo), il che fa iniziare il blocco "laterale" ad un top "effettivo" di 55px.
Quindi l'altezza totale diventa:
100% (della finestra) + 59px
Che chiaramente e` maggiore di 100%.

Per rispondere alla seconda domanda, occorre notare che il "laterale" ha il float, mentre gli altri blocchi no. Per questo il "contenitore" non tiene conto, nel suo posizionamento, del "laterale", e si posiziona subito sotto il "superiore". Tale blocco e` centrato (tranne nei browser IE 5.5 e precedenti).
La sua altezza totale e` 510px, e viene posizionato in modo da sovrapporsi per 60px al blocco "superiore" (a causa del margin-top negativo)

Per sovrapporre i blocchi, non puoi usare i float (mi pare): devono essere tutti posizionati in modo assoluto o relativo; a quel punto puoi usare lo z-index; in mancanza lo z-index presunto e` l'ordine di comparsa dei blocchi nel codice HTML.
Pero` una prova assegnando opportunamente lo z-index puoi farla anche prima di togliere il float dal "laterale".

Se vuoi usare i posizionamenti, ti consiglio la lettura dei due articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi