Webdesign

Float—die Theorie

Der folgende Text ist die Übersetzung des Artikels Float: The Theory, von Big John und Holly Bergevin. Ursprünglich erschien der Artikel bei Community MX, wurde dann aber auch auf Position is Everything veröffentlicht.
Der Text wurde so übersetzt, dass er dem Original möglichst nahe kommt. „Ich“ und „wir“ beziehen sich daher auf Big John und Holly Bergevin. Wo es den Übersetzern (Jens Grochtdreis und mir) notwendig erschien, wurden Anmerkungen angefügt.
Im Gegensatz zum Original bieten wir die Beispiele auch als separate HTML-Dateien an. So kann sich jeder anhand des Quellcodes einen besseren Eindruck machen. Besonders interessant ist dabei, die Fenster der Beispieldateien in der Breite zu verändern.

Anmerkung zum Begriff “float”

To float bedeutet soviel wie „schwimmen“ oder „schweben“. Die zweite Übersetzung trifft zwar die Bedeutung des Begriffs in der CSS-Spezifikation recht gut, scheint allerdings für eine Diskussion dieser Eigenschaft im technischen Sinne nicht besonders geeignet. Es wird daher das Wort float als Substantiv samt des eingedeutschten Verbs „floaten“ verwendet.

Float—die Theorie

Holly Bergevin und ich schrieben diesen Artikel ursprünglich für die Community MX Website, eine umfangreiche Ressourcensammlung einschließlich einer Gruppe von Experten im Forum (erfordert Registrierung).

Die meisten Leute finden das Thema „float“ ziemlich Respekt einflößend. Die Theorie dahinter ist nicht leicht zu verstehen und außerdem sagt man, die Bugs seien zahlreich und fies. Aber fürchten Sie sich nicht, denn wir werden die einzelnen Konzepte, einige der Bugs und die praktischen Anwendungen des float-Elements in kleinen, leicht verständlichen Schritten nachvollziehen. Seien Sie versichert, dass Ihnen kein Schaden daraus entstehen wird. Im Gegenteil: vor Ihnen wird sich eine weite und völlig neue Welt der Positionierung öffnen. Ans Werk!

Grundlegende Eigenschaften

Jedes Element kann „floaten“: Absätze, <div> Elemente, Listen, Tabellen, Grafiken und selbst Inline-Elemente wie <span> oder <strong>.

Jedes Element, das man floatet, wird dadurch automatisch zu einem Block-Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann. Tatsächlich müssen Floats sogar eine zugewiesene Breite haben. Diese wegzulassen, ist ein häufig gemachter Fehler und während das manche Browser verzeihen, stolpern all diejenigen Browser darüber, die sich auf Webstandards besser verstehen. Ohne die Breitenangabe könnte das gefloatete Element entweder so breit sein wie sein Inhalt oder aber wie sein Elternelement. Die Browser müssen sich erst noch einigen, welche Interpretation die richtige ist und auch das W3C diskutiert offenbar noch über dieses Thema.

Floats sind aus dem Fluss der HTML-Elemente herausgenommen. Aber im Gegensatz zu absolut positionierten Elementen, werden Floats direkt nach dem letzten vorausgehenden Block-Element angeordnet (genau wie nicht gefloatete Block-Elemente). Wenn sich ein Float innerhalb einer Zeilenbox befindet, wird die Oberkante des Floats auf eine Höhe mit der Oberkante der Zeilenbox gesetzt. Abgesehen von diesen beiden Eigenschaften, haben Floats große Ähnlichkeit mit absolut positionierten Elementen, denn beide werden von „normalen“ Blockboxen völlig ignoriert. Diese statisch angeordneten, (= „normalen“) Blockboxen werden in ihrem Fluss eine nach der anderen so angeordnet, als ob die Floats gar nicht vorhanden wären.

Hier ist ein minimaler Codeschnipsel für die Beispielgrafik:

  1. <div style="float:left; width:40%;">
  2. <p>Floatender Text</p>
  3. </div>
  4. <p>Absatz ausserhalb des Floats.</p>
  5. Code-Download: /code/tut-float-01.txt

Beispielgrafik

Das Beispiel als HTML-Datei

Man kann Inline-Elemente wie z.B. Text oder Bilder entlang der Seite eines Floats und unterhalb des Floats weiterfließen lassen, genau wie mit dem guten alten (aber inzwischen als „deprecated“ eingestuften) align=left bei einem Bild. Allerdings sind Floats noch wesentlich vielseitiger.

Es ist ein verbreitetes Missverständnis, dass Block-Elemente, die auf ein gefloatetes Element folgen, ebenfalls entlang der Seite des Floats angeordnet werden. Das stimmt nicht. Es sind in der Tat nur die Zeilenboxen (lineboxes) innerhalb der Block-Elemente, die sich so verhalten. (Siehe den ersten Screenshot).

Erinnern Sie sich, dass ich erwähnte, gefloatete Elemente seien aus dem Fluss der HTML-Elemente herausgenommen? Die Spezifikation verlangt, dass Zeilenboxen, die hinter ein Float rutschen würden, soweit verkürzt werden, dass sie „im Freien“ bleiben. Das bedeutet, dass Text und Inline-Grafiken niemals von einem Float zugedeckt werden können, außer wenn sich gefloatetes Element und Inline-Element in separaten Containern befinden. Wenn ein Float sich innerhalb eines absolut positionierten Elements befindet, und dieses absolut positionierte Element würde einen Textabsatz überlappen, dann würden die Zeilenboxen des Textabsatzes nicht durch das gefloatete Element verkürzt, weil sich Float und Text in unterschiedlichen Kontexten des HTML-Dokuments befänden. In dieser Situation würde der Text tatsächlich vom Float zugedeckt.

Ein verbreitetes Problem mit gefloateten Elementen ist, wie man den Text, der entlang des Floats fließt, davon abhält, die Seiten des Floats zu berühren. Es funktioniert nicht, dem Text Polsterung (padding) oder Rand (margin) zuzuweisen, weil diese Eigenschaften auf der linken Seite der Zeilenbox zum tragen kommen und die befindet sich ja hinter dem gefloateten Element. Die richtige Vorgehensweise ist, dem Float selbst einen Rand zu geben und dadurch die Zeilenboxen davon zu überzeugen, dass das gefloatete Element „größer“ ist, als es erscheint. Dadurch werden die Zeilenboxen verkürzt und ein Abstand entsteht. Die meisten Float-Elemente haben einen solchen Rand nur auf derjenigen Seite, die dem Text zugewandt ist sowie auf ihrer Unterseite. Das Float-Element im Screenshot oben hat einen kleinen Rand auf seiner rechten Seite. [Anm. d. Übersetzer: Und einen größeren auf der linken, damit man sehen kann, wie der Absatz unter dem Float weiterläuft.]

Während die Zeilenboxen verkürzt werden, bleiben die Blockboxen wie sie sind und werden vom gefloateten Element verdeckt (auch wenn ihr Inhalt zur Seite verschoben worden ist). Falls das Float sehr hoch ist, kann es sich über einen großen Stapel Blockboxen erstrecken so wie das im zweiten Screenshot gezeigt ist.

Das Beispiel als HTML-Datei

  1. <div style="float:left; width:30%;">
  2. <p>Linker floatender Text</p>
  3. </div>
  4.  
  5. <div> <!-- erster Float -->
  6. <div style="float:right; width:150px;">
  7. <p>Rechter floatender Text</p>
  8. </div>
  9. <p>Text, der dem eingebetteten Float folgt</p>
  10. </div>
  11.  
  12. <p>Absatz</p> <!-- zweiter Float-->
  13.  
  14. <p>Absatz</p> <!-- dritter Float -->
  15. Code-Download: /code/tut-float-02.txt

Beispielgrafik

Wie man sieht, ist eine weitere Eigenschaft von Floats ihre „Richtung“. Wenn ein Element als Float ausgewiesen wird, erhält es immer eine Richtungsangabe: entweder links oder rechts. Also z.B. float: left;. Diese Angabe bewegt das gefloatete Element zu der angegeben Seite innerhalb seines Elternelements.

Manchmal versuchen Anfänger Dinge wie float: up; oder float: bottom;, aber das sind ungültige Angaben und es gibt keine Pläne, sie in künftige Spezifikationen von float aufzunehmen. Man kann aber natürlich immer hoffen…

Wo Floats anfangen

Wenn ein Float-Element zwischen zwei Block-Elemente gerät, wird seine Oberkannte direkt an die Unterkante des vorausgehenden Block-Elements angelegt. Anschließend wird das Float entweder nach links oder rechts geschoben und zwar soweit, bis es an die Seitenkante seines Elternelements (häufig das <body> Element) berührt.

Wenn ein gefloatetes Element sich innerhalb der zweiten Blockbox befindet und wenn diese Containerbox weder Rand noch Polsterung hat, dann wird das Ergebnis genauso aussehen, wie wenn das Float sich zwischen den beiden Blockboxen befindet. Wenn aber die beiden betreffenden Blockboxen von Rändern (oben und unten) auseinander gehalten werden, dann wird die Oberkante des Float-Elements dort beginnen, wo der Rand der einen Box die zweite Box trifft. Im folgenden Screenshot haben die Blockboxen Ränder an der Oberkante, während die Ränder des linken Float-Elements im Vergleich zum vorhergehenden Screenshot entfernt wurden, um das Verhalten eines Floats ohne Rand zu demonstrieren.

Das Beispiel als HTML-Datei

  1. <p>Paragraph</p> <!-- erste Blockbox (komplett) -->
  2.  
  3. <div style="float:left; width:30%;">
  4. <p>links floatender Text</p>
  5. </div>
  6.  
  7. <div> <!-- zweite Blockbox -->
  8. <div style="float:right; width:150px;">
  9. <p>rechts floatender Text</p>
  10. </div>
  11. <p>Text, der auf das verschachtelte, rechts floatende Element folgt</p>
  12. </div>
  13. Code-Download: /code/tut-float-03.txt

Beispielgrafik

Horizontale Anordnung von Floats

Wenn ein links floatendes Element in die linke obere Ecke seines Elternelements platziert wird und ein zweites left-Float direkt auf das erste folgt, dann wird das zweite in der rechten oberen Ecke platziert und solange nach links verschoben, bis es rechts am ersten anliegt.

Durch dieses Verhalten kann man eine ganze Zeile mit Floats erhalten, von denen jedes rechts von seinem direkten Vorgänger platziert wird (oder links davon, wenn man float: right; verwendet). Außerdem werden die Elemente, für die in der ersten Zeile kein Platz mehr ist, umgebrochen und floaten dann in der folgenden Zeile, ähnlich wie das auch Inline-Elemente tun. Das ist ziemlich praktisch, wenn man z.B. eine Sammlung von klickbaren Bilderthumbnails realisieren möchte. Denn die Anordnung der Bilder passt sich jeder Fenstergröße an.

Auf dieser Seite sehen Sie eine Zeile farbiger Floats. Das Element in der linken oberen Ecke kommt im Quellcode zuerst, das in der rechten unteren Ecke zuletzt. Die Elemente haben alle kleine Ränder, damit sie schön aussehen. Verkleinern Sie nun einmal Ihr Browserfenster und Sie werden sehen, wie die Zeile der Floats umgebrochen wird und sich so an die Fenstergröße anpasst.

Die Floats passen sich jeder Fenstergröße an. Beachten Sie auch, wie der Text innerhalb dieses nachfolgenden Absatzes sich allen Änderungen in der Anordnung der Floats angleicht. Der Absatz fängt nämlich genau dort an, wo auch das erste Float beginnt. Da aber von diesem Absatz nur der Text zu sehen ist [und nicht seine Blockbox, Anm. d. Übers.], ist das nicht direkt zu sehen. Die Absätze in den Screenshots haben daher Hintergrundfarben und Rahmen, um die tatsächliche Situation der Anordnung deutlich zu machen.

Wenn einem gefloateten Element der Wert right anstatt left zugeordnet wird, verhält es sich genau wie beschrieben, mit dem einzigen Unterschied, dass das Float dann nach rechts anstatt nach links versetzt wird. Darauf folgende Floats werden entsprechend links und nicht rechts davon angeordnet. In beiden Fällen ist das Umbrechen der Floatzeile ähnlich, wenn nicht Browserbugs dazwischenfunken und zu unterschiedliche Darstellungen führen.

Sie können sich das Verhalten folgendermaßen vorstellen: Ein Float innerhalb eines Elternelements wird (auf der gegenüberliegenden Seite seiner angegebenen „Richtung“) so weit nach oben platziert, wie es der freie Platz zulässt. Dann wird solange es in die angegebene Floatrichtung verschoben, bis es auf die seitliche Begrenzung des Elternelements oder eines anderen Floats stößt. Jedes weitere direkt nachfolgende Float tut genau das gleiche bis eines der Floats in der Breite nicht mehr genug Platz findet und daher von unten an die vorausgehenden Floats stößt. Dann wird es wieder in seine Floatrichtung verschoben und verhält sich ansonsten genau wie bei den anderen beschrieben.

Ein weiteres Beispiel. Diesmal haben nicht alle Boxen die gleiche Höhe.

Vorsicht! Passen Sie auf Floats auf, die nicht alle dieselbe Höhe haben. Wenn ein Float in der zweiten Zeile nach oben rutscht, um dann seitlich in „seine Richtung“ verschoben zu werden, bleibt es am ersten höheren Float „hängen“, dem es begegnet. Mit einer größeren Anzahl unterschiedlich großer Floats kann das ziemlich hässlich werden. Das Beispiel oben enthält einige größere Floats, um das beschriebene Verhalten zu demonstrieren.

Probieren Sie dieses Verhalten aus, indem Sie die Größe Ihres Browserfensters verändern.

Wann immer Sie diese Technik anwenden um eine große Anzahl von Thumbnails o.ä. anzuordnen, müssen Sie sehr darauf achten, dass alle Elemente gleich hoch sind. Ansonsten könnte die Seite schnell aussehen, als wäre ein Zug darauf entgleist.

Alle HTML-Beispiele dieser Seite wurden so gestaltet, dass sie das fehlerhafte Box-Model des Internet Explorer 5.x/Win berücksichtigen (Box-Model Hack). Das war nötig, weil die Boxen in diesen Beispielen Polsterung (padding) und Rahmen (border) haben.

Gegenüberliegende Floats

Es gibt keinen Grund, warum zwei aufeinander folgende Floats nicht verschiedene „Richtungen“ haben könnten. Wenn der Inhalt eines Elternelements mit zwei Floats beginnt, von denen eines links und das andere rechts floatet, dann werden diese beiden tatsächlich nebeneinander angeordnet, sofern das Elternelement ausreichend breit ist. Wenn in der Breite noch Platz übrig ist, erscheint dieser als Lücke zwischen den Floats.

Was aber, wenn in der Breite nicht genügend Platz für beide vorhanden ist? Dann muss das zweite Float unterhalb des ersten angeordnet werden. Allerdings werden die beiden immer noch auf unterschiedlichen Seiten platziert. Wieder können Sie das ausprobieren, indem Sie das Browserfenster verkleinern. Sie können das Umbrechen beobachten und auch sehen, dass kein Umbruch erzeugt wird, wenn die Floats wie im dritten Beispiel prozentuale Größenangaben haben.

Wir haben das Beispiel als separate HTML-Datei ausgelagert. [Anm: Hier fehlt leider das Beispiel, Näheres s.u. ]

Dieses einfache Beispiel funktioniert recht gut, allerdings haben manche Browser Schwierigkeiten, komplexere (multiple) gegenüberliegende Floats zu handhaben. Alles, was etwas komplexer wird, muss daher gründlich in allen Zielbrowsern getestet werden.

Das oben stehende Beispiel hat einen großen Makel: der Internet Explorer 5.x/Win bricht ein nachfolgendes left-Float nie unter ein vorausgehendes right-Float um, außer wenn die beiden Floats in einem Elternelement mit definierter Breite enthalten sind. Unser Beispiel enthält daher so ein Elternelement. Das ist nur einer von vielen IE-Float-Bugs, die sich „beheben“ lassen, wenn man dem jeweiligen Elternelement eine Breite zuweist.

Die Eigenschaft clear

Nun kommen wir zu einer Eigenschaft von floatenden Elementen, die nicht ganz leicht zu handhaben ist und die daher auch häufig missverstanden wird.

Erinnern Sie sich, was wir über statische Boxen gesagt haben, die auf ein floatendes Element folgen? Diese Blockboxen ignorieren das Float einfach und richten sich an der vorausgehenden statischen Box aus. Was passiert nun aber, wenn wir der nachfolgenden statischen Blockbox die Eigenschaft clear:both; zuweisen? Dann wird der obere Rand der mit clear versehenen Box soweit ausgedehnt, bis diese Box unterhalb des floatenden Elements angeordnet werden kann. Der Rand wird vom Browser vergrößert und zwar unabhängig davon, auf welchen Wert er im Stylesheet gesetzt wurde.

Das Ergebnis ist, dass so eine Box mit der Eigenschaft clear horizontal nicht auf derselben Ebene wie ein vorausgehendes Floatelement erscheinen kann. Sie muss direkt unterhalb dieser Ebene angeordnet werden. Die Grafik zeigt, wie das aussehen kann.

Das Beispiel als HTML-Datei

Beispielgrafik

Denken Sie daran, dass sich Floats nicht wirklich innerhalb einer Blockbox befinden auch wenn sie im Quellcode dort eingebettet sind. Zwar bestimmt die Position im Quelltext, wo das floatende Element auf dem Bildschirm anfängt, dann aber erstreckt es sich einfach über das Elternelement hinweg genau wie absolut positionierte Elemente. Nur Zeilenboxen, die Inline-Elemente (z.B. Text) enthalten, scheren sich darum, wo ein Float angeordnet wird.

Die Standardmethode um einem Elternelement den Anschein zu geben, ein darin floatendes Element zu umgeben, ist folgende: an letzter Stelle im Elternelement platziert man ein Element, das die Eigenschaft clear:both; hat.

  1. <div> <!-- float container -->
  2. <div style="float:left; width:30%;">
  3. <p>Irgendein Inhalt</p>
  4. </div>
  5.  
  6. <p>Dieser Text ist nicht im Float.</p>
  7. <div style="clear:both;"></div>
  8. </div>
  9. Code-Download: /code/tut-float-04.txt

Da dieses Element kein Float ist, muss das Elternelement es erkennen und in sich einschließen. Und weil der obere Rand des mit clear versehenen Elements so weit vergrößert wird, bis es unter das floatende Element passt, wird auch das einschließende Elternelement so weit verlängert, bis es das Floatelement komplett umfasst.

Das ist sicherlich eine seltsame Art, so etwas zu realisieren aber so will es die Spezifikation. Allerdings wird beim W3C darüber beraten, eine ergänzende Regel zu formulieren, die das „automatische Umfassen“ von Floats ermöglicht. Das würde die Sache sicherlich vereinfachen.

Tatsächlich umfassen sowohl der IE als auch Opera 7 bereits automatisch solche Floats, die in Elternelementen eingebettet sind, obwohl das nicht der Spezifikation entspricht. Opera 6 hat das nicht getan, daher scheint es, dass Opera in dieser Hinsicht dem standard-missachtenden Verhalten von Microsoft folgt.

Es ist auch möglich, clear: left; oder clear: right; zu verwenden. Dadurch kann ein nachfolgendes Element ein links floatendes Element berücksichtigen, ein rechts floatendes aber nicht (und umgekehrt). Allerdings müssen Ihre Webseiten schon recht „abgefahren“ sein, wenn Sie diese Art der Kontrolle benötigen.

Im allgemeinen funktioniert die Eigenschaft clear recht gut, sie kann aber manchmal kleine und nicht ganz so kleine Bugs zum Vorschein bringen, die fast ausschließlich auf den Internet Explorer beschränkt sind.

Original-Text und Beispiele von John P. Gallant (a.k.a. „Big John“) und Holly Bergevin.
Veröffentlicht auf Community MX und Position is Everything.

Autorisierte deutsche Übersetzung von Andreas Kalt,
Überarbeitung und Beispiele: Jens Grochtdreis.

Zuletzt geändert am 15.12.2007

1Sebastian Köhler schrieb am 23. September 2005, 21:07 h    # 

Ohne die Breitenangabe könnte das gefloatete Element entweder so breit sein wie sein Inhalt oder aber wie sein Elternelement. Die Browser müssen sich erst noch einigen, welche Interpretation die richtige ist und auch das W3C diskutiert offenbar noch über dieses Thema.

Wann wird es voraussichtlich einen Standard geben ? Es ist ja zur Zeit immer noch sehr schwer ein Layout zu erstellen, das vom IE und vom Firefox gleich dargestellt wird. Auch dir Rahmen werden von den Browsern unterschiedlich dargestellt.

2ak schrieb am 23. September 2005, 22:20 h    # 

Ich denke, dass momentan niemand außer einigen wenigen Insidern sagen kann, wann ein solcher Standard zu erwarten ist. In der Zwischenzeit muss man sich mit Kompromissen begnügen bzw. mit flexiblen Layouts arbeiten.

3Markus Barnick schrieb am 22. Oktober 2005, 22:48 h    # 

Eine sehr hilfreiche Seite, allerdings wäre es noch besser, wenn die Beispiele zu den Grafiken passen würden oder die Grafiken als Beispiele beschrieben würden.
Manchmal wird auch auf Beispiele verwiesen, die gar nicht existieren.
Mit etwas mehr Bildern wäre das ganze verständlicher. Es ist teils recht mühsam, sich das ganze mit den neuen Begriffen, die man hier lernt sich ohne Bilder und korrekte Beispiele vorzustellen.
Aber es ist schon mal ein lobenswerter Anfang.

4andreas schrieb am 23. Oktober 2005, 12:45 h    # 

Markus,

welche Beispiele passen nicht oder sind nicht aufrufbar? Ich habe alle durchprobiert und keine fehlenden gefunden. Außerdem enthalten die Beispiel selbst meist den Erklärungstext, so dass ich diesen Einwand auch nicht nachvollziehen kann.

Würde mich über eine Klärung freuen!

Andreas Kalt

5Daniel K. schrieb am 11. Januar 2006, 20:12 h    # 

Ein hilfreicher Text, vielen Dank!

6Valentin schrieb am 6. Februar 2006, 19:32 h    # 

Mit dieser Erklärung versteht man es viel leichter als in irgendwelchen Büchern!

Danke dafür!

7Andi schrieb am 15. Februar 2006, 20:48 h    # 

warum muss das alles nur so kompliziert sein? da blickt doch kein mensch durch. verstanden habe ich es leider nicht. auch nicht nach dreimaligem durchlesen :( hut ab vor denen die es anscheinend verstanden haben – ich versteh nur bahnhof und meine seite sieht aus wie kraut und rüben.

8daniel schrieb am 1. März 2006, 17:28 h    # 

wie kann ich denn floats browserübergreifend dazu bringen ihre höhe anzugleichen? um so ein verhalten wie von tabellen zellen zu simulieren. mit float bekomme ich drei divs so positioniert, dass sie nebeneinanderstehen, aber nun möchte ich, dass die höhe der divs sich an die höhe des höchsten divs angleichen. height: 100% funktioniert leider nicht :(

9Michael schrieb am 13. März 2006, 18:12 h    # 

@Andreas:

es ist z.B. nicht nicht ersichtlich, wo das Beispiel zu finden ist, auf das dieser Text hinweisen soll:

‘Wir haben das Beispiel als separate HTML-Datei ausgelagert.’

Div. andere Beispiele vermisse ich ebenso, wie Markus.

10Stefan Benz schrieb am 22. März 2006, 13:33 h    # 

@ Daniel: Die Antwort auf deine Frage ist ganz einfach: Die Floats lassen sich NICHT anpassen. Der 3-Spalten-Effekt ist aber trotzdem machbar. Und zwar so: Link

@ Andreas Kalt: Toller Text, tolle Übersetzung. Am Anfang habe ich nicht verstanden, was eine “Blockbox” und “Zeilenbox” bedeutet. Vielleicht könntest du das noch näher erklären.

@ Andi: Dann nimm dir mal eine Stunde Zeit, absolute Ruhe, und fang nochmals an. Sobald ein Begriff vorkommt den du nicht verstehst “ask google”. Dannach jeden Satz einzeln verstehen. Sobald du beginnst Sätze zu überspringen => Bahnhof… Ich finde den Text nicht besonders schwierig geschrieben.

11Phil schrieb am 19. Mai 2006, 17:49 h    # 

Hey, danke! Aufklärung war nötig!

Aber…

Wer weiss Rat?
———————————————| __ __ __ |

| | | | | | | |

| | | | | | | |

| __ __ __ |———————————————
Wie kriege ich 3 nested, floated Div’s zentriert?

peace, phil

12Phil schrieb am 19. Mai 2006, 18:04 h    # 

sorry, da hats meine dolle ‘asci-Zeichnung’ zerhauen:)

peace, phil

13Bernd schrieb am 31. Mai 2006, 15:01 h    # 

Hallo Phil,

Du könntest Deine 3 Div-Container in ein allumspannendes Div packen und dieses zentrieren.

Code-Beispiel:

body {

text-align: center;
}

#allumspannendes_div {

margin: auto; text-align: left;
}

Grüße
Bernd

14Grafikkarten Forum schrieb am 5. Februar 2007, 18:22 h    # 

Herrlich, sogar mit beispielen. Vielen Dank Andreas. Super Tutorialsreihe hast du gestartet.

15Gertruda schrieb am 7. Februar 2007, 00:02 h    # 

“...Sie können das Umbrechen beobachten und auch sehen, dass kein Umbruch erzeugt wird, wenn die Floats wie im dritten Beispiel prozentuale Größenangaben haben.

Wir haben das Beispiel als separate HTML-Datei ausgelagert…”

————————————————————————— – Lieber Andreas, hier fehlt aber das Beispiel.
Link?

16ak schrieb am 19. Februar 2007, 12:49 h    # 

Es fehlen in der Tat einige Beispiele bzw. Links. Ich habe noch mal auf meiner Festplatte gesucht, leider aber keine weiteren Beispieldateien gefunden und da die Übersetzung bereits 1,5 Jahre alt ist, wird die Rekonstruktion schwierig.

Leider ist auch der Originalartikel nicht mehr kostenlos zugänglich, sondern zur kostenplfichtigen Community MX Website transferiert worden, so dass der Makel im Tutorial wohl nicht mehr behoben wird.

Ich hoffe, es bringt dennoch ein wenig Nutzen.

17Mike schrieb am 22. März 2007, 16:13 h    # 

Danke für die verständliche Erklärung, war sehr hilfreich.

18Google Pack schrieb am 5. September 2007, 02:25 h    # 

Kann man ein Bild auch in die Mitte irgendwie setzen?

19genaehr.com schrieb am 29. Oktober 2007, 21:42 h    # 

Vielen Dank. Float ist sicher eines der wichtigsten Instrumente für CSS-basiertes Webdesign aber leider enorm zickig. Mit diesem Tutorial wird es ganz bestimmt für viele viel verständlicher.

20ika schrieb am 18. Februar 2008, 19:53 h    # 

Super! Dank dieser Anleitung baue ich gerade meine Foto-Galerie um, die ich mit IrfanView und Tabellen erstellt hatte. Ich hoffe, dass man es in Bälde online sehen kann. Viva CSS! Gruß von einer Anfängerin ;-)