Mit CSS Elemente ausrichten und positionieren

Block-Elemente nehmen standardmäßig die gesamte verfügbare Breite ein und das folgende Element wird unterhalb positioniert, selbst wenn man mit der Eigenschaft width eine Breite zuweist und daneben noch genügend Platz für das nächste Element zur Verfügung steht. Erst durch die Eigenschaft float kann man es mit anderen Elementen umfließen lassen, sodass diese nebeneinander angeordnet werden. Um das Umfließen zu beenden, verwendet man die Eigenschaft clear.

Inline- oder Block-Elemente werden standardmäßig in einem gewissen Fluss positioniert. Block-Elemente werden untereinander und Inline-Elemente nebeneinander positioniert, bis der Platz nicht ausreicht und ein Zeilenumbruch erfolgt. Mit der Eigenschaft position kann man ein Element aus dem Fluss nehmen und über die Eigenschaften top, left, right oder bottom mit einem gewissen Abstand zur normalen Position, zum Elternelement oder zum Anzeigebereich des Browsers positionieren.

Nimmt man die Elemente mit der Eigenschaft position aus dem Fluss, können sie sich überlappen. Mit der Eigenschaft z-index wird von den hinteren bis zu den vorderen Lagen die Reihenfolge der Überlappungen festgelegt.

Die Texte auf ausländischen Websites werden nicht nur im europäischen Stil von links nach rechts geschrieben, sondern auch von rechts nach links, wie das z.B. bei arabischen Texten der Fall ist. Mit der Eigenschaft direction kann man innerhalb der Website den Elementen die Textrichtung ltr (left to right) oder rtl (right to left) vorgeben.

Inline- und Inline-Block-Elemente können horizontal mit der Eigenschaft text-align ausgerichtet werden. Dabei wird die Eigenschaft nicht den auszurichtenden Elementen an sich zugewiesen, sondern den Elternelementen.

Für die vertikale Positionierung von Elementen gibt es mehrere Möglichkeiten. Welche CSS-Regeln man verwendet, hängt dabei maßgeblich davon ab, ob man Inline- oder Block-Elemente ausrichten möchte. Inline-Elemente kann man z.B. mit der Eigenschaft vertical-align ausrichten. Dabei legt man die vertikale Position innerhalb der line-box fest, die unter Berücksichtigung der Zeilenhöhen (line-height) und den Schriftgrößen gebildet wird.