Float

Keine Bange, unser Problem lässt sich mit "float" lösen.
"Float" verwendet man, wenn ein Element oder ein Bereich von einem anderen "umflossen" werden soll.
Ergänzen wir mal die #navi mit einem

float:left;

und sehen nach, was passiert (natürlich vorher abspeichern).
Hervorragend: Der Content ist nach oben "geflossen" und hat dank unserer Rechenkünste auch einen passablen Abstand zur Navi.

Aber warum dann "fließe links"? Ich finde diese Sprachart auch nicht gerade glücklich.
Die offizielle Definition für "float:left;" lautet:
"Das Element steht links und wird rechts davon von nachfolgenden Elementen umflossen."

Wenn es also "steht" kann es doch nicht "fließen". Sei's drum und merkt's euch am besten so:

Merke:
Ein Element mit der Eigenschaft "float: left;" steht links und wird rechts umflossen.
Ein Element mit der Eigenschaft "float: right;" steht rechts und wird links umflossen.

Wer das Thema "float" noch weiter vertiefen möchte (wir sind ja schließlich hier "nur" Einsteiger), dem sei folgender Link empfohlen.

Tipp / Merkspruch:
"Wer floatet muss auch clearen!"

Das bedeutet, dass der "Umfluss" auch wieder beendet werden muss, wenn ein weiterer Container unterhalb des gefloateten platziert werden soll. Dies erfolgt mit den Angaben: "clear: left;" "clear: right;" oder "clear: both;".
Für unser jetziges Layout benötigen das momentan jedoch noch nicht.

Hinweis:
Es gibt per CSS noch einige weitere Möglichkeiten, Navi und Content zu positionieren. Z.B. mit "float: right" für den Content oder durch absolute Positionsangaben. Je nach Variante müssen dann andere Werte unterschiedlich gehandhabt werden. Auch hier gilt: "Viele Wege führen nach Rom."

Der nächste Weg führt uns zu einer Besonderheit des Internet-Explorers.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: