Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

13.4.1 Das Beispiel: drei Boxen ohne float

Die Grundlage für die folgenden Beispiele bilden drei einfache, nicht gefloatete div-Boxen:

HTML CSS
<body>
  <div id="eins">Box 1</div>
  <div id="zwei">Box 2</div>
  <div id="drei">Box 3</div>
</body>
body {
  color: black;
  background-color: gray;
  padding: 0;
  margin:0;
}
div {
  font-weight: bold;
  width: 200px;
  height: 50px;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}
#eins {
  background-color: #fff;
}
#zwei {
  background-color: #ddd;
}
#drei {
  background-color: #aaa;
}

Die drei Beispielboxen haben verschiedene Hintergrundfarben, eine Breite von 200px, eine Höhe von 50px und sehen im Browser so aus:

Abbildung 13.6: Die drei ungefloateten Boxen im normalen Flow
Abbildung 13.6: Die drei ungefloateten Boxen im normalen Flow
Beim Layouten float fast immer mit width

Die Boxen im Beispiel haben alle eine mit width definierte Breite. Das ist kein Zufall. Gefloatete Elemente sind zwar Block-Elemente, schrumpfen aber ohne Angabe von width und werden nur so breit wie ihr Inhalt. »Shrink to fit« heißt das im Englischen.

In bestimmten Situationen wie bei einer Navigationsleiste kann dies nützlich und beabsichtigt sein, aber beim Layouten wird die Breite von gefloateten Boxen ohne width unberechenbar. Bei gefloateten Grafiken ist width nicht nötig, weil Grafiken immer eine feste Breite haben.