Direktnavigation
Weitere Infos
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:
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.
