Ich kann nicht herausfinden, wie ich mit CSS das folgende Layout erzielen kann (wahrscheinlich, weil ich CSS nicht wirklich kenne).

Ich habe ein paar Divs wie dieses:

<div class="right"> <p>1</p> </div>
<div class="left">  <p>2</p> </div>
<div class="left">  <p>3</p> </div>
<div class="left">  <p>4</p> </div>
<div class="right"> <p>5</p> </div>
<div class="right"> <p>6</p> </div>

(nicht der wahre Inhalt)

Nun möchte ich, dass das Layout wie zwei gleiche Spalten mit Divs aussieht, mit den "rechten" rechts und den "linken" links, also:

2 1
3 5
4 6

[Edit: In einer früheren Version dieser Frage hatte ich Textbereiche innerhalb der divs, und die divs hatten alle unterschiedliche Namen wie "one" und "xyz".] Ich habe versucht, so etwas wie

div.right { width:50%; float:right; clear:right; }
div.left { width:50%; float:left; clear:left;}

aber es funktioniert nicht ganz: Es erzeugt so etwas wie:

2 1
3 
4 5
  6

(ohne die "clear" s, es produziert munter

2 1
3 4
6 5

was ist nicht was ist gewollt).

Es ist offensichtlich, dass es funktionieren kann, wenn die Divs anders angeordnet sind, aber ich würde das gerne nicht tun (weil diese Divs dynamisch generiert werden, wenn der Browser Javascript hat und ich das tatsächliche nicht ändern möchte Reihenfolge, die aus semantischen Gründen ohne Javascript angezeigt wird). Ist es immer noch möglich, das gewünschte Layout zu erzielen?

[Für das, was es wert ist, bin ich bereit, dass es nicht mit IE oder älteren Versionen anderer Browser funktioniert. Wenn es also eine Lösung gibt, die nur mit standardkonformen Browsern funktioniert, ist das okay: -)]