zweispaltig

[misterunknown]

Moin,

Das bewirkt eine margin-Angabe allein nicht, noch dazu eine mit so geringem Wert.

Warum geht es dann bei dem entsprechenden Beispiel?

float bewirkt, dass die Container nebeneinander dargestellt werden. (Genauer: Wenn er erste links gefloatet ist, fließen die Inhalte des nachfolgenden Containers um ihn herum.)

Richtig. Und wörtlich heißt es in dem Beitrag von SelfHTML:

Klassische Mehrspaltigkeit ordnet die Spalten in nebeneinander liegenden, sich nicht überschneidenden Rechtecken an. Um dies mit float zu erreichen, muss dafür gesorgt werden, dass die Box des zweiten div-Elements horizontal erst nach dem Ende der float-Box beginnt.
Dies wird für gewöhnlich mit margin-left für das zweite div-Element gelöst, wie auch der SELFHTML-Abschnitt Mehrspaltige CSS-basierte Layouts beschreibt.

Die bewirkt alleine auch nicht, dass Elemente nebeneinander stehen.
Die ist eher im Kontext Einschließen von Float-Boxen interessant. Dass das der Kern deines Problems ist, konnte ich aber noch nicht herauslesen.

Der Kern des Problem ist, dass momentan die beiden Boxen ineinander greifen. Die sollen aber folgendermaßen angezeigt werden:

xxxxxxxx   yyyyyyyyyyyyy
xxxxxxxx   yyyyyyyyyyyyy
xxxxxxxx   yyyyyyyyyyyyy
           yyyyyyyyyyyyy
           yyyyyyyyyyyyy

Grüße Marco