In der Vergangenheit verwendeten viele Websites HTML-Tabellen zum Seitenlayout, da diese Methode in älteren Webbrowsern stets zuverlässige Ergebnisse lieferte. Dies war keine ideale Lösung, da Tabellen eigentlich Tabellendaten anzeigen sollen, anstatt Seiten anzuordnen. Die Verwendung von Tabellen bedeutete auch, dass das Layout in die Seite hartcodiert war, was die Aktualisierung der Site zeitaufwendiger machte. Mit Cascading Style Sheets wurde die Eigenschaft "Float" eingeführt, mit der Designer Elemente nach links oder rechts verschieben können. Dies ermöglicht eine bessere Kontrolle über die Seite und bietet den zusätzlichen Vorteil, dass das Site-Layout vom Inhalt getrennt bleibt.

1

Öffnen Sie einen Texteditor oder einen HTML-Editor und erstellen Sie ein neues HTML-Dokument.

2

Fügen Sie dem Seitentext den folgenden Code hinzu:

Speichern Sie die Seite und öffnen Sie sie in Ihrem Webbrowser. Sie werden sehen, dass der Inhalt im zweiten Div unter dem Inhalt im ersten Div angezeigt wird.

3.

Fügen Sie den folgenden CSS-Code in den Abschnitt Ihres HTML-Dokuments ein:

Speichern Sie die Seite und aktualisieren Sie sie in Ihrem Browser, um die Änderungen anzuzeigen. Die CSS-Regel zielt auf beide Divs ab, die innerhalb des Divs "myContainer" verschachtelt sind. Die Eigenschaft "float" weist den Browser an, die divs nach links zu verschieben. Sie können den Float-Wert in "right" ändern, um die divs an den rechten Rand des übergeordneten div zu verschieben. Die divs sind auf eine feste Breite von 300 Pixel eingestellt und haben einen schwarzen Rand von 1 Pixel, um das Layout besser erkennen zu können. In Ihrem Browser sehen Sie, dass die Kästchen jetzt nebeneinander angezeigt werden.

4

Fügen Sie dem Seitenkörper ein drittes Div außerhalb des Div-Bereichs "myContainer" hinzu (siehe unten):

Speichern Sie die Seite und laden Sie sie erneut in Ihren Browser. Sie werden sehen, dass das dritte Div neben dem ersten und dem zweiten Div angezeigt wird, obwohl es nicht verschoben wurde. Dies tritt auf, weil die verbleibenden HTML-Elemente um die schwebenden Elemente herumfließen. Dies kann in einigen Fällen wünschenswert sein, aber in diesem Beispiel soll das dritte div unter den gleitenden divs angezeigt werden, um eine Fußzeile zu erstellen.

5

Fügen Sie die folgende Regel in den Stilabschnitt im Kopf der Seite ein:

myFooter {

clear: both; 

}

Dies zielt auf das dritte "myFooter" -Div ab und weist den Browser an, das Float abzubrechen und nachfolgende HTML-Elemente unterhalb des "MyContainer" -Divs anzuzeigen. Speichern und aktualisieren Sie die Seite. Sie sehen, dass die durch das dritte Div gebildete Fußzeile nun unterhalb der gleitenden Divs angezeigt wird.

Spitze

• Sie können die CSS-Eigenschaft "margin" verwenden, um ein Leerzeichen zwischen floated divs zu erstellen.