Sönke Tesch: Verhält sich <div> inkonsistent?

Beitrag lesen

Ehrlich gesagt verstehe ich das Verhalten von <div> noch nicht so ganz. Könnt ihr mir sagen, warum diese beiden <divs> eine verschiedene Breite haben?

Mit position:absolute verlierst du die Beziehung zum Dokument, also auch die Breite.

Jein. Absolut positionierte Elemente richten sich nach dem nächsthöheren Elternelement aus, welches als position nicht static (also Normaleinstellung) hat, siehe http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details.

Diese musst du dann explizit setzen!

Nein. Die Berechnung der Breite von absolut positionierten, nicht ersetzten Elementen ist unter http://www.w3.org/TR/REC-CSS2/visudet.html#abs-non-replaced-width beschrieben. Dort ist klar beschrieben, daß die Gleichung

left + margin-/border-/padding-left + width + padding-/border-/margin-right' + 'right'

"width of containing block" ergeben soll (der "containing block" ist jenes eben beschriebene Elternelement). Noch etwas weiter in den Details gewühlt, kommt zu Tage, daß Eddies <div>-left die aktuelle Elementposition bekommt, weil es 'auto' ist (Regel 1), right 0 wird, weil width 'auto' ist (Regel 3), margin links und rechts 0 werden, weil width immernoch 'auto' ist (Regel 4) und -last but not least-, width die restlichen Pixel bekommt, wegen 'auto', genau (Regel 6).

Unter diesen Gesichtspunkten müsste das absolute <div> IMHO tatsächlich die volle Fensterbreite einnehmen. Der Haken ist aber die Frage, was nun genau den Container darstellt, denn das hängt vom Browser ab, falls das Element kein passendes Elternelement (s.o.) findet. Für mein Verständnis müsste das das Browserfenster sein, aber möglicherweise sehen die Browserschreiberlinge das anders..

Gruß,
  soenk.e