<div>-Positionierung: Welches div wie?

[petervna]

Habe mich hier im CSS-Bereich umgesehen und die Suchfunktion verwendet.
Ich glaube _teilweise_ verstanden zu haben, wie man div's im stylesheet positioniert.

(Vorneweg: Bitte hier nur nach dem w3c richten, und nicht beachten, dass manche Browser !fälschlicherweise! etwas anders darstellen. Wenn also eine Methode beim IE nicht zu Erfolg führt, dann ist mir das egal, solange es "korrekt" ist)

Allerdings seh ich nun sozusagen den Wald nicht mehr...

Nehmen wir als Beispiel mal eine "ganz typische" Seitenaufteilung:

<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>

Ohne Positionierung werden diese 4 divs einfach untereinander angeordnet, logisch.
Wenn man jetzt aber "menu" und "content" nebeneinander haben möchte (Menu nach links, Content nach rechts) ... wie geht man vor? Oder: Wie fängt man an?

Zum testen habe ich bei #menu mal: width: 200px; eingegeben.
Nun hat das Menu doch eine feste Breite, richtig?
Der Content rutscht nun nach unten (klar, weil ja divs einen Absatz erstellen, wenn mans nicht anders angibt).
Und nun? Der Absatz soll ja weg... also eventuell float?
Bei Menu also float:left; und schon schmiegt sich der Content an - und müsste nun nur noch mit margin-left beschnitten werden.

Allerdings gibts daraufhin dann Probleme mit dem Footer, der sich - je nach Länge von Content und Menu - für eine der beiden "Seiten" entscheidet.


Aber mal ganz allgemein:

Gibt es eine "gute" und eine "schlechte" Art zu positionieren?
Oder kann ich ruhig alle Befehle verwenden? Oder gibts welche, die man lieber nicht verwenden sollte?
Irgendwie hab ich das Gefühl, dass es mehrere verschiedene Methoden / Arten gibt, wie man an sowas herangehen kann ...

Und zu static, absolute und relative:
Dazu hab ich mir auch einiges durchgelesen, aber wird mir mangels Praxis nicht so ganz klar...

absolute bedeutet, ich positioniere und das div kümmert sich nicht um andere divs. Es ist genau da, wo ich es haben will, könnte also auch ggf ein anderes div überdecken. Oder?

(für das konkrete Beispiel von oben wäre "absolute" also nicht nötig, richtig?)

static ist die Standardeinstellung. Aber mir ist nun nicht so klar, wo der Unterschied zu relative liegt.

Nach was ich (neben den bisher hier gestellten Fragen) suche, ist soetwas wie eine "Grundregel"...
Header? Wird meist "so und so" gemacht..
Vertikales Menu? Meist "so und so" ...
Float? Braucht man meistens nur "dann und dann"

 

[Grizou]

Bei Menu also float:left; und schon schmiegt sich der Content an - und müsste nun nur noch mit margin-left beschnitten werden.
Allerdings gibts daraufhin dann Probleme mit dem Footer, der sich - je nach Länge von Content und Menu - für eine der beiden "Seiten" entscheidet.

mach mal ein clear:left beim footer (beendet das float:left). dann sollte der footer eigentlich unter content und menu sein.

 

[petervna]

Ahh, danke. Den Befehl hatte ich ganz vergessen.
Klappt :)

Nun noch eine konkrete Frage:
Ist es möglich, dass Menu und Content immer "gleich lang" sind? Also immer bis zum Footer durchgehen, und nicht früher stoppen, wenn zuwenig Inhalt drin ist.
Jetzt bei meiner Testseite besteht das Menu nur aus 3 Zeilen, der Content aus über 10. Und das Menu stoppt entsprechend nach den 3 Zeilen.

Und allgemein:
Kann noch jemand was zu oben gestellten Fragen sagen?

Achja, und da fällt mir auf diesem Wege noch eine Frage ein:
Lesen Screenreader die divs in der Reihenfolge vor, wie sie im Quelltext der html-datei stehen?
Also in dem Fall von oben würde ein Screenreader erste den Header, dann das Menu, dann den Content vorlesen?
Kann man da irgendwie trixen? Oder müsste man dann tatsächlich die Reihenfolge im Quelltext ändern?

 

[StarExplorer]

Hallo

sind sie nicht mit width: 100% gleich lang?

 

[flapo]

Erstens heisst es height.
Zweitens: Schon, aber nur auf Bildschirmhöhe. Wenn der Inhalt länger ist, passiert was, das nicht vorhergesehen ist (weiss jetzt aber nicht genau was...)