| This is an Infobox | |
|---|---|
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
Ich suche eine CSS-Lösung für dieses Problem. Das Endergebnis soll genauso aussehen, wie es jetzt hier aussieht. Aber im HTML-Quelltext soll zuerst der erste Absatz stehen, dann die Box und danach der zweite Absatz. First paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph.
Second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph.
In diesem Beispiel stimmt die Reihenfolge im HTML-Quelltext (erster Absatz, Box, zweiter Absatz). Der erste Absatz wird mit float: left; ausgezeichnet und die Box erhält ein negatives Margin. Leider hat das zwei Nachteile: Der erste Absatz hat einen festen Abstand nach rechts. Er fließt also nicht mehr um die Box herum, falls der erste Absatz länger als die Box ist. Der zweite Absatz fließt schließlich gar nicht mehr.
| This is an Infobox | |
|---|---|
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
Second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph.
Hier stimmt die Reihenfolge im HTML-Quelltext ebenfalls (erster Absatz, Box, zweiter Absatz). Die Box wird mit position: absolute; positioniert. Leider führt das dazu, dass die float-Eigenschaft komplett ausgehebelt wird und die Absätze nicht mehr fließen. Der erste Absatz hat wie im vorigen Beispiel ein festes Margin. First paragraph first paragraph first paragraph.
| This is an Infobox | |
|---|---|
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
Second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph.
Hier stimmt die Reihenfolge ebenfalls. Vor dem ersten Absatz habe ich ein leeres Platzhalter-div eingefügt (hier grün eingefäbrt, damit man es sieht). Dieses leere div realisiert das float. Die echte Box wird dann mit position: absolute; an die selbe Position wie der Platzhalters gesetzt. Das Problem hierbei ist, dass der Platzhalter keine Ahnung hat, wie hoch die Box ist. Das ließe sich notdürftig mit JavaScript beheben, aber das ist sehr instabil (Änderungen der Schriftgröße lassen das Design zerfallen, von deaktiviertem JavaScript ganz zu schweigen). JavaScript-Korrektur aktivieren | JavaScript-Korrektur wieder deaktivieren.
| This is an Infobox | |
|---|---|
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
| A key: | And a value |
Außerdem hat der IE ein Problem mit dem zweiten Absatz. Er macht das float nicht mit und sitzt immer unter der Box. Second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph.
Thiemo Mättig, 2007-08-09