[axelf]

Hallo,

folgende Struktur:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

Alle div's haben eine Breite von 50%.

Ist es möglich, div3, div6 und div7, so anzuordnen, das sie rechts neben den anderen Containern liegen, so das es im Browser so aussieht: (Wobei die Anordnung im Quelltext beibehalten wird)

<div>1</div><div>3</div>
<div>2</div><div>6</div>
<div>4</div><div>7</div>
<div>5</div>

[lottikarotti]

Hallöchen,

ich schätze was du suchst ist float. Da dies aber absolute Basics sind, solltest du zunächst Little Boxes durcharbeiten.

Mit freundlichen Grüßen,
lotti

[axelf]

Hi,

ich denke die Basics zu beherrschen. Mit einem einfachen float ist es leider nicht getan. Mit einem float:right für die genannten div-Container erreiche ich nicht die gewünschte Darstellung.

[schatzi]

Hallo!

Wenn der HTML-Aufbau so erhalten bleiben muss (warum auch immer), dann bleibt dir wohl nur die Möglichkeit, das über "position" zu lösen (wenn die div's eine feste Höhe haben).

[fricca]

Zitat von axelf

ich denke die Basics zu beherrschen. Mit einem einfachen float ist es leider nicht getan. Mit einem float:right für die genannten div-Container erreiche ich nicht die gewünschte Darstellung.

Tipp: Du brauchst kein float für die rechten Container.
Wenn das nicht reicht: Zeig deinen Versuch.

[axelf]

Zitat von schatzi

Hallo!

Wenn der HTML-Aufbau so erhalten bleiben muss (warum auch immer), dann bleibt dir wohl nur die Möglichkeit, das über "position" zu lösen (wenn die div's eine feste Höhe haben).

Der Aufbau sollte so erhalten bleiben, da auf einem größeren Display die Anordnung so sein soll wie oben geschrieben, aber auf einem kleineren Display soll das Layout linear sein, also alle Container untereinander.

Leider funktioniert das nicht so einfach, da die Reihenfolge der Container ja geändert wird. Meine bisherige Lösung habe ich nur mittels Javascript hinbekommen, und wie du gesagt hast, mittels position absolute positioniert. Endpunkt des ersten divs ist Startpunkt des darunterliegenden divs. Die Höhe kann variabel sein.

Wenn es natürlich rein mit CSS gehen würde, wäre es viel besser

[fricca]

Zitat von axelf

Der Aufbau sollte so erhalten bleiben, da auf einem größeren Display die Anordnung so sein soll wie oben geschrieben, aber auf einem kleineren Display soll das Layout linear sein, also alle Container untereinander.

Dafür gibt es Media Queries. Davon ist in deinem Schnipsel nichts zu sehen.

Leider funktioniert das nicht so einfach, da die Reihenfolge der Container ja geändert wird. Meine bisherige Lösung habe ich nur mittels Javascript hinbekommen, und wie du gesagt hast, mittels position absolute positioniert. Endpunkt des ersten divs ist Startpunkt des darunterliegenden divs. Die Höhe kann variabel sein.

Es ist unverständlich, wovon du redest. Dein Pseudocode oben zeigt keine Elemente mit "variabler Höhe". Nur ein paar Zahlen.

Wenn es natürlich rein mit CSS gehen würde, wäre es viel besser

Einen Tipp habe ich dir bereits gegeben.
Dein Pseudocode oben ist viel zu unkret. Poste einen Link zu dem, was du bereits hast, siehe auch unsere Hinweise für Fragende.

[axelf]

Hier mal der Link:

jsFiddle

Der gelbe,rote und blaue Container sollten auf der rechten Seite sein.

[fricca]

Float, clear und width für die "linken".
Nur margin für die "rechten".

[axelf]

Hallo fricca,

auf margin bin ich gar nich gekommen. Vielen, vielen Dank für die super Hilfe. Nun hat es geklappt:
jsFiddle

Ich habe die ganze Zeit nur mit float probiert.