Aligner des blocs en CSS suivant leur nombre

Bonjour,

récap de la situation avant que ça change (le problème quand il n'y a pas de code posté ici ou sur un Codepen / jsfiddle) :
#maincontent est flottant à gauche avec une largeur de ~2/3
#sidebar a une largeur de 2/3 et contient des éléments aside flottants à droite
Suit un div avec clear both;
Et #fullwidthsection qui contient un élément avec "des trucs" (float: left, etc)

Supprimer ce <div style="clear: both;"></div> permet d'obtenir la mise en page désirée : cette déclaration empêche en effet les éléments qui suivent de remonter plus haut que les éléments flottants rencontrés jusqu'alors, et comme tous les aside de la sidebar sont flottants #fullwidthsection reste coincé sous (les enfants de) la sidebar.
Ou alors il faut supprimer tous les float: right et voir ce que ça donne.
Ou remplacer clear: both par clear: left; : l'élément qui suit ne peut pas remonter au-dessus d'éléments flottants à gauche mais peut le faire avec les éléments flottants à droite.
Ou utiliser CSS3 Grid Layout pour la mise en page si IE11 n'est pas un souci (pas Flexbox en tout cas pas ici vu la mise en page souhaitée)

Ressource pour les flottants utilisés comme mise en page : https://openweb.eu.org/articles/initiation_float/ (à la partie "spacer" mais ce qui précède aide à comprendre).

Merci de votre réponse. En effet, supprimer le <clear:both> et le replacer par un <clear:left> ou rien, permet de résoudre le problème 'en partie'. On obtient la figure à gauche de l'image jointe. Par contre, si je rajoute un troisième événement (le bloc avec image violette), celui-ci fait que l'ensemble de la ligne revient à nouveau sous la side-bar (figure au milieu de l'image). Ce que je voudrais c'est que les blocs 'événements', quel que soit leur nombre, se place deux par deux les uns sous les autres, comme la figure de gauche de l'image, sans se déplacer vers le bas de la page.

Merci