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

Beitrag lesen

(...) Unter diesen Gesichtspunkten müsste das absolute <div> IMHO tatsächlich die volle Fensterbreite einnehmen.

Vielleicht habe ich nicht verstanden, worauf du hinaus willst, aber redest du davon, wie sich die Browser verhalten sollten, wenn die Breite explizit auf 100% gesetzt wird?

Nein, das war in der Fragestelle ja auch nicht der Fall. Ich habe lediglich das nachvollzogen, was laut CSS-Doku passiert, wenn width=auto ist.

Denn komplett ohne width-Angabe richtet sich die Breite eines absolut positionierten Elements offensichtlich nach dessen Inhalt (in dem Fall Text).

Nein, laut CSS-Doku soll das ja gerade nicht sein. Im bereits zitierten Absatz 10.3.7, "Absolutely positioned, non-replaced elements" (http://www.w3.org/TR/REC-CSS2/visudet.html#abs-non-replaced-width),  der CSS-Doku heißt es unter Regel 3 eindeutig:

"If 'width' is 'auto', replace any remaining 'auto' for 'left' or 'right' with '0'."

Ein absolut positioniertes <div> ohne width-, left- und right-Angabe muß also die gesamte Breite seines Containers einnehmen, nicht die Breite seines eigenen Inhalts.

right wird im Normalfall nicht 0 und der rechte Rand des Elements

Was ist normal[tm]? :) Falls Du position:static meinst, wird right in der Tat 0, deshalb nimmt das normale <div> (Element 1 in Deinem Beispiel unten) ja auch die volle Breite des Fensters ein. Siehe Absatz 10.3.3 (obwohl ich mich da frage, wie width funktionieren kann, wenn left und right von vornherein 0 sind).

Die Beobachtung bei width:100% würde deine Theorie bzw. Lesart der Specs teilweise unterstreichen (falls du wie gesagt das meintest):
________________________________
|  ____________________________  |
| |Text eins___________________| |
|  ______________________________|___
| |Text zwei_____________________|___| <- Überlappung im Gecko
|                                |
|_______________________________>|

|____________________________|
     Breite content edge body
|_|                            |_|
         padding von html
|________________________________|
     Breite margin edge html

Text zwei in einem absolut positionierten Element mit top-Angabe, aber ohne left-Angabe, und hat width:100%. Im Gecko/Mozilla wird das zweite Element so breit wie das html-Element insgesamt (und da es aufgrund der fehlenden left-Angabe links dort anfängt, wo die Innengrenzen des body-Elements anfangen, also bündig mit dem frei fließenden ersten Element ist, geht es über das Fenster hinaus und es werden horizontale Scrollbalken angezeigt).

Das passt aber auch nicht. Bei Prozentangabe ist die Breite relativ zur Breite des Containers - und _die_ Breite ist, wie wir aus leidvoller IE-Erfahrung wissen, nicht jene inklusive Ränder, sondern exklusive. Das Element 2 müsste also genauso groß sein wie Element 1, den left nimmt den dem aktuellen Fluß entsprechenden Wert ein (Regel 1), width wird mit 100% kalkuliert (Regel 3 trifft nicht zu) und right wird abschließend aus left und width berechnet (Regel 6).

Im Opera 7.11 und MSIE 6 hingegen bedeutet width:100% die Breite des body-Elements (beide Elemente sind gleich breit, wie in der Ursprungsfrage wünscht).

Sollte der IE es tatsächlich mal besser machen als Gecko? Da bricht ein Weltbild zusammen ;)

Gruß,
  soenk.e