Divs anordnen

[Kerbin]

Ich habe div1, div2, div3 in dieser Reihenfolge so definiert, dass in etwa folgendes entsteht:

<div1...>           <div8...>
<div2...>           <div9...>
<div3...>
......
         ......
also links ein Auswahlmenu, rechts der Inhalt.
Nun soll, wenn die Anzeigebreite entsprechend schmal ist, alles untereinander stehen.
Dies habe ich geschafft.
Jetzt möchte ich allerdings den Inhalt des div9 ganz oben haben.
Daher habe ich diesem die Position absolut, left:0 und top:0 gegeben.
Das steht jetzt auch oben, allerdings wird es von den nachfolgenden divs überlappt.
Muss ich jetzt alles absolut positionieren - oder wie kann ich angeben, dass alles weitere unter diesem div positioniert wird?

[Matthias Apsel]

Om nah hoo pez nyeetz, Kerbin!

<div1...>           <div8...>
<div2...>           <div9...>
<div3...>

Dass die Elemente nur beispielhaft so heißen, und in der wirklichen Seite <div id="1">... setze ich mal voraus. In HTML unterhalb Version 5 dürfen IDs nicht mit einer Zahl beginnen.

also links ein Auswahlmenu, rechts der Inhalt.

Da gibt es sicher besser geeignete Elemente.

Jetzt möchte ich allerdings den Inhalt des div9 ganz oben haben.
Daher habe ich diesem die Position absolut, left:0 und top:0 gegeben.
Das steht jetzt auch oben, allerdings wird es von den nachfolgenden divs überlappt.
Muss ich jetzt alles absolut positionieren - oder wie kann ich angeben, dass alles weitere unter diesem div positioniert wird?

So allgemein formuliert, fällt es mir schwer, einen Lösungsvorschlag anzubieten. Das beste wäre, du zeigst die Seite. Vielleicht erst, nachdem du die divs durch semantisch passende Elemente ersetzt hast.

Matthias

[Kerbin]

Hallo Matthias

also links ein Auswahlmenu, rechts der Inhalt.

Da gibt es sicher besser geeignete Elemente.

Die Numerierung sollte nur die Reihenfolge der divs verdeutlichen. Natürlich hat jedes div eine alphanum. id.

So allgemein formuliert, fällt es mir schwer, einen Lösungsvorschlag anzubieten. Das beste wäre, du zeigst die Seite. Vielleicht erst, nachdem du die divs durch semantisch passende Elemente ersetzt hast.

Bevor ich mich daran wage:
Wird HTML allgemeinunterstützt?
Ist die Version 5 aufwärts kompatibel oder muss ich möglicherweise an anderen Stellen Änderungen vornehmen?
Schönen Gruß
Kerbin

[Martin Rettberg]

Hi,

dein Vorhaben wäre mit Flexbox und der Eigenschaft "order" in Verbindung mit Media Queries ziemlich leicht umsetzbar. Leider ist der Browser-Support für Flexbox bisher noch recht bescheiden.
Du könntest "div1" ein margin-top in der Höhe von "div9" zuweisen: Beispiel.
Wie du sicher feststellst funktioniert das nur solange, wie die Höhe von "div9" bekannt ist.

Martin