Die Eigenschaft float

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Bereits unter Das Layout der Kopleiste haben wir uns kurz mit der Eigenschaft float beschäftigt. Mit ihrer Hilfe haben wir die Elemente in der Kopfleiste positioniert und Bilder an eine neue Position schweben lassen, sodass sie vom Text umflossen wurden. Im nächsten Beispiel werden wir ein mehrspaltiges Layout entwickeln, das auf der Eigenschaft float beruht. Aber bevor wir uns in die Neuentwicklung unseres Layouts stürzen, schauen wir uns ein einfaches Beispiel an, mit dem wir ein gründlicheres Verständnis der Arbeitsweise dieser Eigenschaft bekommen.

Das Dokument, das wir für dieses Beispiel benutzen, definiert dieselben Bereiche, die auch das Layout unserer späteren Produktionsseite haben wird.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="floatexample.css" />
    <title>Beispiel: Schwebende Spalten</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <p>Seitenkopf</p>
      </div>
      <div id="main">
        <div id="sidebar">
          <p>Erste Seitenleiste</p>
        </div>
        <div id="sidebar2">
          <p>Zweite Seitenleiste</p>
        </div>
        <div id="content">
          <p>Inhaltsbereich</p>
        </div>
      </div>
      <div id="footer">
        <p>Fußleiste</p>
      </div>
    </div>
  </body>
</html>

Als Erstes ist Ihnen vielleicht aufgefallen, dass sich die Reihenfolge der div-Elemente gegenüber dem vorigen Layout, in dem wir positionierte Elemente verwendeten, unterscheidet: Hier erscheinen die beiden div-Elemente für die zwei Seitenleisten vor dem div-Element #content. Es sind jedoch alle Bereiche der Seite enthalten. Bevor wir nun irgendwelche CSS-Regeln anwenden, schauen wir uns an, wie dieses Dokument im Browser angezeigt wird. Die folgende Abbildung zeigt den aktuellen Stand:

Die Beispieldatei ohne CSS

Abbildung: Die Beispieldatei ohne CSS.

Jetzt erzeugen wir ein Stylesheet floatexample.css und fügen die folgenden Regeln ein:

body {
  margin: 0;
  padding: 0;
  font: small Helvetica, Arial, sans-serif;
}
#header {
  margin: 0;
  padding: 0;
}
#main {
  margin-top: 10px;
}
#sidebar {
  float: right;
  width: 220px;
  border: 1px solid black;
  background-color: #dddddd;
}
#sidebar2 {
  float: left;
  width: 159px;
  border: 1px solid green;
  background-color: #99ff99;
}
#content {
  border: 1px solid blue;
  background-color: #9999ff;
  margin: 0 240px 0 160px;
}
#footer {
  clear: both;
  border: 1px solid red;
  background-color: #ff9999;
}

Nachdem Sie dieses Stylesheet eingebunden haben, sollte die Seite mit drei umrandeten Spalten, einer Kopfleiste und einer Fußleiste angezeigt werden, so wie in der folgenden Abbildung.

Die Seite, nachdem das Stylesheet eingebunden wurde

Abbildung: Die Seite, nachdem das Stylesheet eingebunden wurde.

Wie Sie sehen, spiegelt diese Darstellung die wesentlichen Bestandteile des Layouts unserer Projektseite wieder: eine Kopfleiste, zwei Seitenleisten, ein variabler Hauptbereich, der mit dem Browserfenster wächst und schrumpft, und eine Fußleiste. Wenn Sie weiteren Text in jede dieser Spalten einfügen, werden Sie feststellen, dass die Fußleiste immer unterhalb aller drei Spalten angezeigt wird, und zwar immer unterhalb der längsten Spalte. Das können Sie in der folgenden Abbildung sehen.

Die Fußleiste wird immer unterhalb der längsten Spalte angezeigt

Abbildung: Die Fußleiste wird immer unterhalb der längsten Spalte angezeigt.

Wie funktioniert das?

Als wir uns im vorherigen Kapitel über die Eigenschaft float unterhielten, erklärte ich, dass Elemente mit float aus ihrem natürlichen Kontext, der von der umgebenden Box bereitgestellt wird, herausgleiten. Inhalte, die ebenfalls in der Box enthalten sind und auf die die Eigenschaft float nicht angewendet wurde, umfließen dann diese schwebenden Elemente.

In unserem Layout gleiten die beiden Seitenleisten auf die rechte bzw. linke Seite des Hauptbereichs, dessen Inhalte dann die beiden Spalten umfließen. In diesem Beispiel wollen wir das aber vermeiden, weshalb wir für das div-Element #content breite Außenränder definieren, die bis zum Seitenende hinunterlaufen, selbst wenn die Seitenleisten kürzer sind als der Inhalt des Hauptbereichs.

Das letzte Mosaiksteinchen in diesem Layout ist die Eigenschaft clear im div-Element #footer, die dafür sorgt, dass die Fußleiste immer unterhalb aller Spalten angeordnet ist, ohne irgendwelche anderen Teile des Layouts zu überlappen. clear kann einen der Werte left, right oder both annehmen. Wenn wir clear: both auf die Fußleiste anwenden, wird diese erst dann angezeigt, wenn der Raum, den die beiden Seitenleisten rechts und links belegen, frei ist. Weil die Fußleiste im Textfluss des Dokuments dem Hauptbereich folgt, wird sie selbstverständlich auch erst unterhalb dieses Bereichs angezeigt.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg