Ciao a tutti, sicuramente sto annegando in un bicchiere d'acqua ma proprio non riesco a posizionare correttamente i div nella mia pagina. Cerco di spiegare al meglio il problema:

Ho 3 DIV come nella seguente immagine:
div-pos.png

i blocchi "sidebar"(verde) e "Loop"(rosso) hanno lunghezza variabile, e voglio che il blocco "footer"(blu) non si sovrapponga a nessuno dei due blocchi sopra.

Il codice che ho scritto è il seguente:

codice:
<!DOCTYPE html><html>
<head>
<style>


.sidebar{
background-color: green;
width: 100px;
height: 100px;
position: absolute;
}


.archive-loop{
background-color: red;
margin-left: 110px;
width: 200px;
height: 50px;
}


.footer{
background-color: blue;
margin-top: 10px;
width:310px;
margin-top: 10px;
}


</style>
</head>
<body>


<div class="container-box">
<div class="sidebar">Sidebar</div>
<div class="archive-loop">Loop</div>
</div>
<div class="footer">Footer</div>


</body>
</html>
ma il footer continua a sovrapporsi alla sidebar se il loop è più corto. Non riesco a trovare soluzione da nessuna parte. Come posso risolvere?
Grazie mille!