Salve gente,
ok, il titolo è abbastanza confuso, ma non mi veniva niente di meglio in mente, anche perché la domanda è pure ben complessa.
Innanzitutto immaginatevi la seguente struttura:
codice:
<div class="collassato">
    <div></div>
</div>
<div class="seguente">
    <div></div>
<div>
Con il seguente codice CSS:
codice:
.collassato { height: 40px }

.collassato > div {
    float: left;
    height: 80px;
}

.seguente { height: 400px }

.seguente {
    float: left;
    height: 200px;
}
Ora, il primo DIV > DIV, avendo un'altezza più alta del padre ed essendo flottato, fuoriesce dallo stesso e di conseguenza si sovrappone al secondo DIV principale. Tutto normale fino a qui, perché è un effetto che ho voluto ottenere io, proprio per ottenere una sovrapposizione con i float.
Il problema è che, il secondo DIV > DIV, vorrei farlo posizionare al di sotto del primo DIV > DIV che dovrebbe sovrapporlo, ma se metto il float: left, esso segue il DIV > DIV sovrapposto, mentre se aggiungo anche il clear: left, esso si abbassa e non si "sottopone" al DIV > DIV sovrapposto.
Cosa posso fare? Devo per forza passare al posizionamento assoluto? Possibile che con ii float questo comportamento di sovrapposizione non è ottenibile seppure il collasso dei float è un comportamento più che leggittimo?

In sostanza voglio attenere questo: