<h1> Aufbau einer Seite </h1>

Soll es unter dem Bild oder einem umfloateten Div-Container weiter gehen, ist style="clear:left", style="clear:right" oder style="clear:both" erforderlich. Dafür gibt mehrere Möglichkeiten, z.B. Letzteres kann man im Tag oder mit dem Class-Selektor  .clear definieren.

• Im Stylesheet:
  h2 { style="clear:left"; }
  gilt für alle h2-Tags
• Im Tag
  <h2 style="clear:left"; >
• Als Class-Selektor im Tag
  <h2 class="clear" >
• Als Div-Container mit Class-Selektor
  <div class="clear" >
  <h2 > Überschrift </h2>
  </div >

Der Haupttext in der Mitte fließt nicht unter die beiden Randspalten. Die Breite des mittleren Div-Containers passt sich an die äußeren Ränder an, das ermöglicht definierte Randspalten.
Im Quelltext der Text steht die rechte Spalte NACH dem Haupttext in der Mitte, dadurch können Suchbegriffe nach unten rutschen.
In der mittleren Spalte hatte ich im Firefox 3.0. Probleme mit sehr großen Texten (150kB), die unten abgeschnitten wurden.

Diese Anordnung wirkt äußerlich wie die obige. Der Unterschied ist, dass diesmal die rechte Spalte im Quelltext NACH dem Haupttext in der Mitte. Das kann Vorteile haben, wenn Stichworte aus dem Haupttext weiter nach oben rücken sollen. Nachteilig ist, dass sich die Breite des rechten Div-Containers an die beiden linken Container anpasst und von der Bildschirmbreite anhängt (wenn man die Darstellungsbreite freigibt.

Ein weiterer, schwerer Nachteil ist, dass ältere Browser Schwierigkeit mit dieser Konstruktion haben, weil sie scheinbar nicht wissen, wie breit der Container wird. Überschriften, Unterstreichungen, Hintergrundfarben in diesem Container können sich über die ganze Bildschirmbreite ziehen.

Diese Spalten werden von Firefox 3.0 und IE 8.0 unterschiedlich dargestellt. IE8 zieht die umhüllende clear bis unter die längste Spalte. Firefox 3.0 zieht clear bis unter die Spalte, die als letzte im Quelltext steht. Dadurch kann das folgende Alphabet zwischen die Spalten gezogen werden.

Der Haupttext in der Mitte fließt ohne eigenen Div-Container unter beide Ränder. Man kann auch sagen, dass beide Ränder in der Box für den Hauptext stehen. Auch hier habe ich noch nicht das Problem des seitlichen Abstandes zu den Randspalten gelöst.

(3) <h3> Fülltext </h3>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Zwei Spalten gleicher Breite kann man mit identischen Div-Containern erzeugen, die jeweils knapp 50% des umhüllenden Conatiners einnehmen. Der Text fließt nicht von einer Spalte zur anderen.

Drei Spalten gleicher Breite kann man mit identischen Div-Containern erzeugen, die jeweils knapp 33% des umhüllenden Conatiners einnehmen. Der Text fließt nicht von einer Spalte zur anderen.

Ein Sonderfall für meine Tutorials sind umflossen Tabellen. Die Verwendung von <table> für das Layout ist zwar verpönt, aber für wirkliche Tabellen darf es durchaus eingesetzt werden. Die nebenstehende Tabelle steckt in einem Div-Container, der sie auch formatiert.