hi Detlef,
danke dir für die Beschäftigung mit dem Problem - auch wenn ich mittlerweile Erklärung und Workaround selber herausfinden konnte.
Dieses Verhalten tritt genau dann auf, wenn die Boxen die gleiche oder eine geringere Höhe haben, als der negative margin.
Ja, da meine gefloateten Elemente ihre Höhe ja nur aus der line-height bezogen, auf die ich's dann mal geschoben habe, trifft deine Erklärung mit der height natürlich hier implizit ebenfalls zu.
Das ist interessant, dass sich diese beiden einig sind.
Und noch interessanter, dass sie offenbar laut Spezifikation mal wieder recht haben - im Gegensatz zum IE 6, auch wenn der tat, was ich "wollte" :-)
Nein, die Boxen würden sich einfach nicht mehr berühren, wenn sie nicht _alle_ den negativen Margin hätten.
Ja, das ist die Erklärung.
Dadurch, dass ich das erste gefloatete Element "zu hoch" hebe, fließt das nächste wieder bis an den linken Zeilenrand. Ob ich dieses zweite danach ebenfalls noch mit negativem Margin auf gleiche Höhe zu heben versuche, spielt keine Rolle mehr.
Wenn die Boxen keine Dekoration bekommen sollten (Rahmen, Hintergrund), könntest du ihnen einfach eine genügende Höhe verpassen, ansonsten bleibt wohl nur position:relative; um sie in den Rahmen zu bekommen.
Ja, danke nochmals - beide Möglichkeiten waren mir inzwischen auch eingefallen.
Das mit dem "Berühren" wird übrigens noch besser vorstellbar, wenn man berücksichtigt, dass bei relativer Positionierung der Effekt nicht auftritt - durch die Platzreservierung hat das nachfolgende floatende Element "noch jemanden vor sich", was es davon abhält, ganz an den linken Zeilenrand zu fliessen.
gruß,
wahsaga
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }