Fluffi meinte, dass ich mir mit dem kleinen Bild in diesem Entwurf keinen Gefallen tun würde. Und da sollte er Recht behalten, denn mit CSS einen Text um ein Objekt floaten zu lassen, dass an diesem Textblock unten ausgerichtet ist, ist einfach unmöglich (lasse mich gerne vom Gegenteil überzeugen).
Aber ich hab mich ja nicht auf reines CSS festgelegt und so hab ich mal munter mit Javascript gespielt. Und Tada:
Das ganze kann man sich hier in live angucken.
Funktioniert so, dass das rote Kästchen absolut an die richtige Stelle positioniert wird (mittig ans untere Ende des divs, welches die beiden Textspalten umgibt). Und jetzt wird per Javascript in jede Spalte ein weiteres Kästchen gepackt, um das der Text floatet. Dummerweise kann man da nur den oberen Punkt irgendwo im Text platzieren, so dass man die richtige Position finden muss, dass das floatende Kästchen (ist übrigens blau) ganz nach unten geht.
Also packe ich dieses div erstmal ganz an den Anfang von Text, es wird also ganz oben gefloatet. Totaler Quatsch. Dann schiebe ich das floatende div immer ein Wort weiter nach hinten, bis die Position des blauen divs unterhalb (oder gleichhoch) des roten divs ist.
Nicht kapiert, oder? Egal, einfach mal den Quellcode angucken.
Nachdem die linke Spalte so angepasst wurde, kommt die rechte Spalte dran. Dann ist es aber nicht fertig, denn wie man im aktuellen Fall sieht, ist die rechte Spalte länger als die linke. Darum schiebt sich durch das Einfügen des float-Blockes das Ende der rechten Textspalte weiter nach unten und verschiebt somit auch das rote Viereck. Darum muss die linke Spalte nochmal angepasst werden. (Hab das in der Live-Version mal mit Alerts angezeigt)
Und wenn Javascript deaktiviert ist, wird das rote Kästchen momentan gar nicht angezeigt. Kann man sich ja überlegen, wo und wie man es statt dessen anzeigen will.
Wohoo! Ich komme meinem Entwurf immer näher!
Und jetzt könnt ihr mir sagen, wie ihr es gemacht hättet…
PS: Ne bessere Überschrift ist mir nicht eingefallen, sorry…
PPS: Blindtexte von hier.
Update: Hab mir heute Nacht überlegt, dass das mit meiner Realisierung ja auch mit beliebigen Positionen zwischen den Spalten gehen muss und nicht nur unten fixiert. Darum hier jetzt eine Version, in der man das rote Kästchen mit drag&drop verschieben kann und sich das Floating dann anpasst. Macht nur Sinn, wenn sich das rote Kästchen zwischen den beiden Spalten befindet.