Ciao, il problema dipende da quel position:absolute che stai applicando a .sidebar. In questo modo l'elemento viene tolto fuori dal normale flusso dei contenuti.

Si può risolvere in vari modi ma attualmente una soluzione semplice può essere l'uso di flexbox. Questo ti permette di facilitare l'impostazione per l'impaginazione dei contenuti.

Prova ad impostare il CSS in questo modo:
codice:
.container-box{
   display: flex;
}

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

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

.footer{
   background-color: blue;
   margin-top: 10px;
   width:310px;
}
Sostanzialmente ho applicato display:flex a .container-box, ho tolto position:absolute da .sidebar e ho aggiustato il margin-left di .archive-loop

Per maggiori informazioni sull'uso di flexbox puoi dare uno sguardo al capitolo 9 dei link utili CSS.

Buon proseguimento