13. POSITIONIERUNG MIT CSS

Bestimmte Elemente werden untereinander als Boxen dargestellt und andere gelten nur für einen kleinen Bereich innerhalb dieser Boxen. Ein Block-Element erzeugt einen Absatz, während Inline- Elemente keinen Absatz machen.

Block-Elemente: Im Quelltext hintereinander stehende Elemente wie beispielsweise div-Container und Paragrafen-Tags werden untereinander angeordnet. Wird die Breite nicht explizit angegeben, dehnen sie sich über die gesamte zur Verfügung stehende Breite (Breite des übergeordneten Elements) aus. Auch wenn die Breite angegeben wird und eventuell sogar noch genug Platz daneben wäre, stehen diese Art von Elementen immer untereinander. Moderne Webdesigns bauen auf dem Prinzip der Verschachtelungen von Containern auf, d.h., Block-Elemente können innerhalb anderer Block-Elemente angeordnet werden. Geben Sie keinem Container in Ihrem Dokument eine Breitenangabe mittels des CSS-Attributs width, werden sich alle Block-Elemente auf die gesamte Seitenbreite ausdehnen. Geben Sie beispielsweise dem < body > eine fixe Breite von 1000px, werden sich alle Block-Elemente innerhalb von < body > , die keine Breitenangabe bekommen haben, auf diese 1000px ausdehnen, da der Body fortan als übergeordnete Referenzbreite dient. Zu den Block-Elementen zählen vor allem die folgenden:
< address > < blockquote > < div > < form > < h1 > bis < h6 > < ol > < p > < table > < ul >

Inline-Elemente: Der zweite grosse Typ von Elementen wird INLINE-Element genannt. Inline- Elemente dehnen sich nicht über den verfügbaren Platz aus, sondern belegen nur genau den Platz, der wirklich gebraucht wird. Zu den Inline-Elementen zählen vor allem die folgenden:
< a > < br > < button > < img > < input > < label > < select > < span > < strong > < sub >

Positionierung mittels float

Wenn Sie einem Element den Wert float geben, wird das Element im umliegenden Container ab sofort umflossen.

Bild am linken Rand vom Text rechts umfliessen lassen

Float beenden mit clear

Geben Sie dem ersten Element, das nicht mehr umfliessen soll, den Wert clear:
clear: left; clear: right; clear: both;

Float kontrollieren mit overflow

Geben Sie dem übergeordneten Element den Wert overflow. Dadurch dehnt sich der umliegende Container auf die Höhe aller darin befindlichen float-Elemente aus. Alle Elemente ausserhalb des mit overflow gekennzeichneten Containers ordnen sich danach wieder darunter an. Möglich sind:
overflow: auto; overflow: hidden;

overflow